Pass value between component in React Native Navigator

Question

How can I pass data from sceneA to sceneB with Navigator in React Native?

I\'m using this to go to sceneB:

Answer 1

You need to set up the passProps property on the navigator. There are a few recent examples on stack overflow, specifically here and here.

    {
    return React.createElement(, { ...this.props, ...route.passProps, navigator, route } );
  }} />

or

 {
      
     }
   }
 />

If you are looking for the most basic of setups just to understand the functionality, I have set up a project here that you can reference, and pasted the code below.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  Image,
  TouchableHighlight, TouchableOpacity
} = React;

class Two extends React.Component {
    render(){
    return(
        
          Hello From second component
          id: {this.props.id}
          name: {this.props.name}
            name: {this.props.myVar}
        
    )
  } 
}

class Main extends React.Component {
  gotoNext(myVar) {
   this.props.navigator.push({
      component: Two,
      passProps: {
        id: 'page_user_infos',
        name: 'page_user_infos',
        myVar: myVar,
      }
    })
  }

  render() {
    return(
      
         this.gotoNext('This is a property that is being passed') }>
          Go to next page
        
       
    )
  }
}

class App extends React.Component {
  render() {

    return (
          {
            if (route.component) {
                          return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
                      }
                }}
          navigationBar={
            
      } />
);
}
}


var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(index > 0) {
      return (
       {
            if (index > 0) {
              navigator.pop();
            } 
        }}>
       Back
     
 )} else {
 return null}
 },
  RightButton(route, navigator, index, navState) {
    return null;
  },
  Title(route, navigator, index, navState) {
    return null
  }
};


var styles = StyleSheet.create({

});

AppRegistry.registerComponent('App', () => App);