title: AWS Amplify Auth / react-navigation: How to access auth state?
body: <p>In my <a href="https://facebook.github.io/react-native" rel="nofollow noreferrer">React Native</a> mobile application, I would like to authenticate my users using <a href="https://aws-amplify.github.io/docs/js/authentication" rel="nofollow noreferrer">AWS Amplify Authentication</a> and manage navigation between screens using <a href="https://reactnavigation.org" rel="nofollow noreferrer">React Navigation</a>. I tried to implement everything "by the book", i.e. as per the docs and my App <em>conceptually</em> looks like this:</p>
  
  <pre><code>// import statements skipped
  
  class FirstTabScreen extends React.Component {
    render = () =&gt; {
      {/* access some data passed in screenProps */}
      const someData = this.props.screenProps.someData;
      {/* TODO: how to access AWS Amplify auth data here ?!? */}
      {/* this.props contains screenProps and navigation objects */}
      console.log("this.props: ", this.props);
      {/* this.props.authState is undefined */}
      console.log("this.props.authState: ", this.props.authState);
      return &lt;View&gt;&lt;Text&gt;First Tab - some data: {someData}&lt;/Text&gt;&lt;/View&gt;
    };
  }
  
  class SecondTabScreen extends React.Component {
    render = () =&gt; {
      const otherData = this.props.screenProps.otherData;
      return &lt;View&gt;&lt;Text&gt;Second Tab - other data: {otherData}&lt;/Text&gt;&lt;/View&gt;
    };
  }
  
  const AppNavigator = createBottomTabNavigator({
    FirstTab: { screen: FirstTabScreen },
    SecondTab: { screen: SecondTabScreen },
  });
  
  const AppContainer = createAppContainer(AppNavigator);
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        someData: null,
        otherData: null,
      };
    }
  
    componentDidMount = () =&gt; {
      this.setState({ someData: 'some data', otherData: 'other data' });
    };
  
    render = () =&gt; {
      return (
        &lt;Authenticator&gt;
          &lt;AppContainer
            screenProps={{
              someData: this.state.someData,
              otherData: this.state.otherData,
            }}
          /&gt;
        &lt;/Authenticator&gt;
      );
    };
  }
  
  export default App;
  </code></pre>
  
  <p>The code sample above skips a few important details; I have created a full <a href="https://snack.expo.io/@z00m1n/aws-amplify-auth-react-navigation" rel="nofollow noreferrer">Expo Snack</a>.</p>
  
  <p>The AWS Amplify <code>Authenticator</code> wraps the application and makes authentication data available to embedded components as e.g. <code>this.props.authState</code>; see <a href="https://aws-amplify.github.io/docs/js/authentication#customize-your-own-components" rel="nofollow noreferrer">docs</a>.</p>
  
  <p><strong>My problem</strong> now is that I don't understand how to access this auth data in e.g. <code>FirstTabScreen</code>: In that component, <code>this.props</code> contains <code>screenProps</code> and <code>navigation</code> objects, but <code>this.props.authState</code> is <code>undefined</code>. With <code>AppContainer</code> and <code>AppNavigator</code> in between <code>Authenticator</code> and e.g. <code>FirstTabScreen</code>, I don't see how to pass auth data as props or transport them by some other means.</p>
  
  <p><strong>Furthermore</strong>, I just pass all data to all embedded components in <code>screenProps</code>; this does work, but not all screens require all data. How would I go about passing them only the data they actually require ? I know about <a href="https://reactnavigation.org/docs/en/params.html" rel="nofollow noreferrer">passing parameters to routes</a>, but all the code samples in there have a <code>Button</code> and use <code>this.props.navigation.navigate(...)</code> in the <code>onPress</code> handler. I don't have any buttons on those screens and don't need any - after all, navigating to a different tab is what the tabs in the bottom tab nav bar are for ?!?</p>
  
  <p>Could anyone kindly shed some light on this for me ?</p>