react native how to pass props through navigator to another Activity/View

2
votes

It seems like simple solution (as it was intuitively for me), but I couldn't find any working solution.

Here is my Navigator - render method code:

  render() {
    return (
      <Navigator initialRoute={{title:'Games', component:Games}}
      configureScene={() => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
      renderScene={(route, navigator) =>
        {
          if (route.component) {
            return React.createElement(route.component, {navigator});
          }
        }
      } />
    );
  }

Here is how I'm passing props:

this.props.navigator.push({title: 'MainActivity', component:MainActivity, gameKey:key, passProps:{title:'bla'}});

Here is a MainActivity where I want to get those props.

I've tried:

this.props.route.gameKey, 
this.route.gameKey,
this.props.gameKey

neither worked, I understand that may be I should pass those props specifically through renderScene, the other way. May be passing route through createElement?

Please help.

The problem was more serious, because I've passed props from one activity to the other via Navigator.

So, the solution to pass every time anything U need (from any activity to any) is using in 

return React.createElement(route.component, {navigator, route});

Thanks to @stereodenis.

After push like this in any activity: this.props.navigator.push({title: 'MainActivity', component:MainActivity, gameKey:key, passProps:{title:'bla'}});

And then access them via: this.props.route.gameKey

To make it totally clear - route is now accessible, because of passed {navigator, route} in createElement every time U push, so this is yet another prop.

2
react-native

2 Answers

3
votes

The renderScene of the Navigator component should be: 

{ title, gameKey, passProps } = route;
return React.createElement(route.component, {
  navigator,
  title,
  gameKey, 
  passProps
})
1
votes

passProps is more for NavigatorIOS. For Navigator, the renderScene will do the work. Usually, the route name is pushed. And renderScene will decide the component and properties in declarative JSX.

Push:

this.props.navigator.push({name: 'Main', gameKey: someKey});

RenderScene:

renderScene(route, navigator) {
  let component;
  switch(route.name) {
    case 'Main':
      component = <MainActivity title="Main Activity" gameKey={route.gameKey} />;
    default:
      component = null;
  }
  return component;
}