How to pass props between screens when using react-native-router-flux

Question

App.js snipper

  render() {
      if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
          return (
              <AppLoading
                  startAsync={this._loadResourcesAsync}
                  onError={this._handleLoadingError}
                  onFinish={this._handleFinishLoading}
              />
          );
      } else if (!this.state.isAuthenticated) {
          return (
              <Router>
                  <Scene key="root">
                      <Scene key="signIn"
                             component={SignIn}
                             title="Scarlet"
                             initial
                      />
                      <Scene
                          key="signUp"
                          component={SignUp}
                          title="Gray"
                      />
                 </Scene>
              </Router>
          )
      } else {
          return (
              <AppNavigator/>
          )
      }
  }

What I would like to do is pass the isAuthenticated state variable into the SignIn component as a prop. Then, inside the SignIn callback after a successful call to my authentication service I can update the prop and back in App.js instead of SignIn/SignUp being rendered, the AppNavigator component would be rendered.

I'm having trouble finding documentation or examples of how to pass these values between.

Passing props in react-native-flux-router

I found this above example, but I'm confused by the fact that the prop is assigned to handleClick

How to pass values to other component in React-Native-Router-Flux?

I also found this example, which seems promising but I'm not sure about where the Actions.key{props} goes. This person seems to have it assigned to onPress.

My issue is that I'm not using clicks to navigate between the Scenes here. I'm using the Action object inside SignIn and SignUp.

Sorry I know this is rambling but I'm hoping someone will have seen this before.

score 1 · Answer 1 · edited Feb 12 '19 at 11:03

If I am reading this right, you want to call an Action and pass a variable as a property. Actions.signIn({ isAuthenticated: true });

Then you use this isAuthenticated property in the signIn scene with this.props.isAuthenticated.

Or if you want to pass a function as a property:

let myFunction = () => {
  //do some magic here
}; 
Actions.signIn({ doMagic: myFunction });

Then in your signIn you call this.props.doMagic(); and myFunction gets called.

How to pass props between screens when using react-native-router-flux

1 Answers1