Daniel Doubrovkine bio photo

Daniel Doubrovkine

aka dB., CTO at artsy.net, fun at playplay.io, NYC

Email Twitter LinkedIn Github Strava

Passing the Relay environment around to make it available in each QueryRenderer with react-navigation seems unnecessarily difficult because of the difference between component props and screen props. I’ve successfully used react-navigation-props-mapper to merge the two in 33-minutes-app.

screenProps at App Level

import React, { Component } from 'react';
import { createRootNavigator } from './app/Main';
import environment from './app/Environment';

export default class App extends Component {
  render() {
    const screenProps = {
      relay: {
        environment: environment
      }
    }

    const Layout = createRootNavigator();

    return (
      <Layout screenProps={ screenProps } />
    );
  }
}

withMappedNavigationProps at Component Level

Using react-navigation-props-mapper in each separate screen such as Settings.

import { withMappedNavigationProps } from 'react-navigation-props-mapper';

@withMappedNavigationProps()
class Settings extends React.Component {

  render() {
    return (
      <QueryRenderer
        environment={this.props.relay.environment}
        ...
      />
    )
  }
}

You no longer have to import the Relay environment all over the place.

_signup() {
  const environment = this.props.relay.environment;
  CreateUserMutation.commit({
    environment,
    input: {

    }
  });
}