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: {
}
});
}