Data Transfer Using Interactive Navigation

Question

I am trying to transfer data between screens in my application. I am currently using

---

"react-native": "0.46.0", "react-navigation": "^1.0.0-beta.11" 

I have 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 secondscreen.js, where we will retrieve the data that was transferred 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 am a .log console, I get undefined.
https://reactnavigation.org/docs/navigators/navigation-prop The docs say that each screen should have these values, what am I doing wrong?

Answer 1

In your code, props.navigation and this.props.navigation.state are two different things. You should try this on your second screen:

 const {state} = props.navigation; console.log("PROPS " + state.params.user); 

the const {state} is only available for easy to read code.

Answer 2

First grade

 <Button onPress = { () => navigate("ScreenName", {name:'Jane'}) } /> 

Second class

 const {params} = this.props.navigation.state 

Answer 3

jet navigation 3. *

Parent class

 this.props.navigation.navigate('Child', { something: 'Some Value', }); 

Kids class

 this.props.navigation.state.params.something // outputs "Some Value" 

Answer 4

You can access your user parameter, with props.navigation.state.params.user in the corresponding component (SecondScreen).

Answer 5

From responsive navigaton 3.x documents , you can use getParam(params) .

  class SecondScreen extends React.Component { render() { const { navigation } = this.props; const fname = navigation.getParam('user'); return ( <View> <Text>user: {JSON.stringify(fname)}</Text> </View> ); } } 

Answer 6

I developed an NPM package to send data from one component to other components. Please check and use it easy to use.

Respond to navigation data

 import { DataNavigation } from 'react-data-navigation'; . . . // For set the data you need to call setData(key, value) Function ie // eg. DataNavigation.setData('name', 'Viren'); // it will set the 'Viren' as respect to 'name' key. import { DataNavigation } from 'react-data-navigation'; . . . // Here we want to get the name value, which you set in home component than // console.log('Hey my name is' + DataNavigation.getData('name')); // it will print in console : Hey my name is Viren. 

Comment down for any help.