title: How to dynamically change props of navigation screens in react-navigation
body: <p>I wrote a <code>&lt;Wizard&gt;</code> and a <code>&lt;Router&gt;</code> component with react-navigation like so:</p>
  <pre><code> generateNavigator = () =&gt; {
    const { steps, title, onSave, loggedIn } = this.props;
    const navigationRoutes = {};
    steps.forEach((step, index) =&gt; {
     const routeOptions = {
      screen: step.component,
      params: {
       bg: step.bg,
       text: step.text,
       image: step.image,
       onSave: onSave,
       loggedIn: loggedIn
      }
     };
     navigationRoutes[step.routeName] = routeOptions;
    });
  
    const navigationOptions = {
     headerStyle: {
      backgroundColor: '#ffffff',
      paddingHorizontal: 5,
     },
     headerTintColor: '#111111',
     headerTitle: title,
    };
  
    const Stack = createStackNavigator(navigationRoutes, { navigationOptions });
    const AppContainer = createAppContainer(Stack);
    return AppContainer
   }
  </code></pre>
  <p>onSave is a function in the main App.js and loggedIn is a state from the main App.js (onSave is a function to change the bool-value of loggedIn)</p>
  <p>The function works, but only <code>&lt;Router&gt;</code> and <code>&lt;Wizard&gt;</code> get the props update. The child-components form the navigation stack get only the initial value and won't update their props to the changed state from App.js</p>
  <p>I tried this in my App.js onSave()-Function:</p>
  <pre><code>_onSave = (navigation) =&gt; {
      console.log(navigation);
      navigation.setParams({
        loggedIn:
          navigation.state.params.loggedIn === false ? true : false
      });
      this.state.loggedIn === false ? this.setState({ loggedIn: true }) : this.setState({ loggedIn: false });
  
  }
  </code></pre>
  <p>This sets the param correctly, but if I go back from the screen or navigate further and navigate to the login screen again, the state is set back to false and I have to login again.</p>
  <p>How can I save the &quot;loggedIn&quot; state for the screens of the navigation as well?</p>
  <p>Currently there is no real login-logic, just a button-click as a clickdummy like this:</p>
  <pre><code>&lt;Button
       style={styles.marginButton}
       onPress={() =&gt; {
        onSave(navigation);
       }}
  &gt;
  </code></pre>
  <p>Both <code>&lt;Wizard&gt;</code> and <code>&lt;Router&gt;</code> have the correct current state of loggedIn (false before buttonPress and true after buttonPress - even if I navigate). Just the params of the screen component just stay until I navigate away from the Login-Screen. After that it's set back to initial state.</p>
  <p>I think the problem is, that once the Navigator is created the initial state stays as it is or maybe the navigation components don't rerender?...</p>
  <p>I need a way to change and save the param even if I navigate to another screen.</p>
  <p>Expo Snack: <a href="https://snack.expo.io/0RQU64li_" rel="nofollow noreferrer">https://snack.expo.io/0RQU64li_</a></p>