Im trying to pass data between screens in my app. Currently I am using
"react-native": "0.46.0","react-navigation": "^1.0.0-beta.11"
I have my index.js
import React, { Component } from 'react'; import { AppRegistry, } from 'react-native'; import App from './src/App' import { StackNavigator } from 'react-navigation'; import SecondScreen from './src/SecondScreen' class med extends Component { static navigationOptions = { title: 'Home Screen', }; render(){ const { navigation } = this.props; return (<App navigation={ navigation }/> ); } } const SimpleApp = StackNavigator({ Home: { screen: med }, SecondScreen: { screen: SecondScreen, title: 'ss' }, }); AppRegistry.registerComponent('med', () => SimpleApp);
app as
import React, { Component } from 'react'; import { StyleSheet, Text, Button, View } from 'react-native'; import { StackNavigator } from 'react-navigation'; const App = (props) => { const { navigate } = props.navigation; return (<View><Text> Welcome to React Native Navigation Sample!</Text><Button onPress={() => navigate('SecondScreen', { user: 'Lucy' })} title="Go to Second Screen" /></View> ); } export default App
then in the secondscreen.js where we will fetch the data which passed from the previous screen as
import React, { Component } from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { StackNavigator } from 'react-navigation'; const SecondScreen = (props) => { const { state} = props.navigation; console.log("PROPS"+ state.params); return (<View><Text> HI</Text></View> ); } SecondScreen.navigationOptions = { title: 'Second Screen Title', }; export default SecondScreen
Whenever I console.log I get undefined.
https://reactnavigation.org/docs/navigators/navigation-propThe docs say every screen should have these values what am I doing wrong?