Menu
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-prop The docs say every screen should have these values what am I doing wrong?
453
To pass data when navigating programmatically with React Router, we can call navigate with an object. Then we can use the useLocation hook to return the object's data. const navigate = useNavigate(); navigate('/other-page', { state: { id: 7, color: 'green' } });
Just call an alert method in the childToParent function and pass that function as a prop to the child component. And in the child component, accept the childToParent function as a prop. Then assign it to an onClick event on a button. That's it!
With the React Navigation, we can also pass values or parameters between screens in React Native. We will create a simple stack navigator with 2 screens and will pass values from one screen to another screen.
Using React Router, when you want to create a Route that uses a URL parameter, you do so by including a : in front of the value you pass to Route 's path prop. Finally, to access the value of the URL parameter from inside of the component that is rendered by React Router, you can use React Router's useParams Hook.
In your code, props.navigation and this.props.navigation.state are two different things. You should try this in your second screen:
const {state} = props.navigation; console.log("PROPS " + state.params.user); the const {state} line is only here to get an easy to read code.
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
