React-native: [Navigator] How to pass props when using Navigator?

Created on 24 Nov 2015 · 10Comments · Source: facebook/react-native

I used to have an app built on NavigatorIOS, and I use passProps to communicate for parent-children communication.

I am now switching to Navigator but it seems that passProps is no longer effective. What's the good pattern to pass properties in Navigator?

Many thanks for your help.

Locked

Source

unmec

Most helpful comment

You can use renderScene of navigator which gives you access to the route and navigator objects.

Then when you want to push a new scene you can pass the properties and have them accessible inside the route object.

Example of the renderScene function:

renderScene(route, navigator) {
  switch (route.id) {
    case 'home':
    return <Home navigator={navigator} data={route.data} />;
  }
}

Example of the pushing a new scene:

this.props.navigator.push({
  id: 'home',
  data: Object
})

christopherdro on 24 Nov 2015

👍9 ❤1

All 10 comments

Hey macelii, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
If you don't know how to do something, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
We welcome well-written issues and PRs that are ready for in-depth discussion; thank you for your contributions!

facebook-github-bot on 24 Nov 2015

You can use renderScene of navigator which gives you access to the route and navigator objects.

Then when you want to push a new scene you can pass the properties and have them accessible inside the route object.

Example of the renderScene function:

renderScene(route, navigator) {
  switch (route.id) {
    case 'home':
    return <Home navigator={navigator} data={route.data} />;
  }
}

Example of the pushing a new scene:

this.props.navigator.push({
  id: 'home',
  data: Object
})

christopherdro on 24 Nov 2015

👍9 ❤1

Thank you so much for looking @christopherdro!

mkonicek on 24 Nov 2015

@mkonicek No Problem! :)
@macelii Going to close this issue out for now since this questions seems more appropriate for Stack Overflow. Feel free to post your question there or join us on Discord if you'd like some more help.

Hope you get it figured out! :)

christopherdro on 24 Nov 2015

Thanks @christopherdro , this help many

devgenerate on 19 Dec 2016

In addition to the above, if you want to pass a bunch of props you can do this:

this.props.navigator.push({
      id: viewId,
      props: {
          someProp: this.props.someProp
      }
});

and in your navigator's parent:

renderScene(route, navigator) {
  switch (route.id) {
    case 'home':
    return <Home navigator={navigator} {... route.props} />;
  }
}

coconup on 15 Feb 2017

👍2

@coconup, and we only need to remember that: Home will copy all route.props as its own props.
So , to use those route.props within Home, e.g someProp, just access via this.props.someProp.

samthui on 13 Apr 2017

I alway fount issue in redirection "Cannot read property 'push' of undefined". what is making wrong ?

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,Navigator,
Text,TouchableOpacity,
View
} from 'react-native';

export default class Main extends Component {

changepage(a){
alert("Page name: "+a);
this.props.navigator.push({
id: a,
})
}

render() {
return (

   <TouchableOpacity >
        <Text style={styles.welcome}  onPress={this.changepage('Test')}>
        Login please
     </Text>
     </TouchableOpacity>  

    <Text style={styles.instructions}>
      To get started, edit index.ios.js
    </Text>

  </View>
);

}

renderScene(route, navigator) {
switch (route.id) {
case 'Test':
return ;
}
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Main', () => Main);