send data from screen to Tab screen using react-native-router-flux

Question

I am trying to send the data from one screen to another using react-native-router-flux, But the problem is that i am unable to receive data at the receiving end of the screen. Here is my code snippet:

In router.js

<Router>
    <Stack key="root">
      <Scene
        key="signup"
        component={Signup}
        title=""
        initial={true}
        hideNavBar={true}
      />
      <Scene key="login" component={Login} title="" />

      <Scene key="bottomtourbar" tabs={true} hideNavBar={true}>
        <Scene
          key="toursHome"
          component={Tours}
          title="Tours"
          hideTabBar={true}
          hideNavBar={false}
        />
        <Scene
          key="analytics"
          component={Analytics}
          title="Analytics"
          hideNavBar={true}
          hideNavBar={false}
        />
       </Scene>
      </Stack>
  </Router>

In Login.js im an using the below code to pass parameter to toursHome page

Actions.toursHome({dataResponse:jsonResponse});

In ToursHome.js file I am trying to access the parameter sent by login page

export default class Tours extends Component {
  constructor(props) {
    super(props);
  };
  render() {
    const responseData = this.props.dataResponse;
    console.log(responseData);
    return (
      <View style={styles.container}>
        <ToursTab />
        <View style={styles.TabbedContainer}>
          <Text>{responseData}</Text>
        </View>

        <ToursBottom />
      </View>
    );
  }
}

In console it prints as undefined.

Sending props from sign-up screen to login works by using "Actions.login({dataResponse:jsonResponse});", But sending props from login to tab bar screen fails . Can anyone help me get through this issue.

Answer 1

I have tried achieving that in many different ways. But I learned "the hard way" that passing props through Actions to scenes on different levels (depth, as in your case toursHome scene is nested under bottomtourbar scene) is only properly done through redux. If your scenes are connected to redux (using connect()) then update the state in the store and it should be available to your connected component through mapStateToProps.

Otherwise, passing props between scenes using Actions is doable for scenes on the same level/depth (for example in your case it is going to successfully pass the props with Actions between analytics and toursHome or signup and login)