Daniel Doubrovkine bio photo

Daniel Doubrovkine

aka dB., @awscloud, former CTO @artsy, +@vestris, 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: {

    }
  });
}