title: Passing screenProps to a tab navigator
body: <p><strong>Background</strong></p>
  
  <p>I have a root component that controls the views of 2 components. I am conditionally rendering these components. </p>
  
  <p>I am passing <code>screenProps</code> to these 2 components so I can expose a <code>function</code> from the root components. </p>
  
  <p>When component 1 is rendered it takes the <code>screenProps</code> perfectly. But component 2 is actually controlled by a <code>tabNavigator</code>. So when it is loaded, it is the default component in the <code>tabNavigator</code> which ends up being <code>Login</code>.</p>
  
  <p>I want to pass the <code>screenProps</code> down multiple components or in other words give access to a function from root in the <code>Login</code> component, which is a component that is loaded through the <code>TabNavigator</code>.  </p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>&lt;Secure screenProps={{ login: () =&gt; this.setState:({ secure: false }) }} /&gt;
  &lt;Public screenProps={{ login: () =&gt; this.setState:({ secure: true }) }} /&gt;
  
  Secure takes the component fine. But the  screenProps is called inside of the actual Secure component. The Public component has a TabNavigator. So when I pass screenProps to Public the components loaded via the TabNavigator do not have access to the screen props. 
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>How do I pass <code>screenProps</code> to the children of <code>Public</code> which are loaded through a <code>TabNavigator</code>?</p>
  
  <p><strong>Code</strong></p>
  
  <p>Component that calls the <code>TabNavigator</code></p>
  
  <pre><code>const Public = props =&gt; (
      &lt;View style={styles.container}&gt;
          {/* &lt;Header
              headerStyle={StyleSheet.flatten(styles.headerColor)}
              headerTitle="wunO"
          /&gt; */}
          &lt;BottomTabNav /* screenProps past here! */ /&gt;
      &lt;/View&gt;
  );
  </code></pre>
  
  <p><code>LoginComponent</code> which is loaded when tab is clicked from the <code>PublicComponent</code>.</p>
  
  <pre><code> async getToken() {
        try {
            const tokenKey = 'WUNO-TOKEN';
            const token = await AsyncStorage.getItem(tokenKey, (err) =&gt; {
                if (err) {
                    throw err;
                }
                this.props.screenProps.login();
            });
            return token;
        } catch (e) {
            throw e;
        }
  </code></pre>
  
  <p>}</p>
  
  <p>So all together,</p>
  
  <p><strong>Main Component</strong></p>
  
  <pre><code>&lt;Public screenProps={{ login: () =&gt; this.setState({ secure: true }) }} /&gt;
  </code></pre>
  
  <p><strong>Public Component</strong></p>
  
  <pre><code>&lt;BottomTabNav screenProps={props.screenProps.login} /&gt;
  </code></pre>
  
  <p><strong>Login Component</strong></p>
  
  <pre><code>this.props.screenProps.login();
  </code></pre>
  
  <p>This throws the error,</p>
  
  <blockquote>
    <p>Cannot read property 'login of undefined</p>
  </blockquote>