title: Passing props to components in React Navigation v5 dynamic component configuration
body: <p>In my app, I am displaying a login screen if the user is not logged in, and a logged-in screen if the user is logged in. In the simple example below, you can see that I am checking if the <code>jwt</code> and <code>user</code> exists in my redux store and then displaying the appropriate screen.</p>
  
  <pre><code>type Props = {
      +jwt: string | null;
      +user: UserModel | null;
  };
  
  export class AuthStackNavigator extends Component&lt;Props&gt; {
  
      renderScreen() {
  
          if (this.props.jwt &amp;&amp; this.props.user) {
              return (
                  &lt;Stack.Screen name={'AuthenticatedView'} component={AuthenticatedView} /&gt;
              );
          } else {
              return (
                  &lt;Stack.Screen name={'LoginView'} component={LoginView} /&gt;
              );
          }
      }
  
      render() {
          return (
              &lt;Stack.Navigator&gt;
                  {this.renderScreen()}
              &lt;/Stack.Navigator&gt;
          );
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return {
          jwt: getJwt(state),
          user: getUser(state)
      };
  };
  
  export default connect(mapStateToProps)(AuthStackNavigator);
  </code></pre>
  
  <p>You can see that the <code>AuthenticatedView</code> component is rendered if the <code>jwt</code> and <code>user</code> exists. Inside <code>AuthenticatedView</code>, I am currently getting the <code>user</code> from the redux store again where it is possibly null - this involves another check. Is there a way I can pass the <code>user</code> to the component as a prop from <code>&lt;Stack.Screen&gt;</code> as I know it exists here? This way I do not have to make the same check multiple times. </p>
  
  <p>I'm aware that you can send data to components when navigating using:<code>navigation.navigate('View', props)</code>, but I do not navigate to this screen using this function.</p>