Daniel Doubrovkine bio photo

Daniel Doubrovkine

aka dB., @awscloud, former CTO @artsy, +@vestris, NYC

Email Twitter LinkedIn Github Strava
Creative Commons License

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';

class Settings extends React.Component {

  render() {
    return (

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

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