I tried an example of React Native Navigator:
const StudentStackNav = StackNavigator({
Home: {
screen: StudentLogin,
}
});
How do I pass a parameter to StudentStackNav and pass it to StudentLogin?
I have tried <StudentStackNav name='Lucy'>
but this.props.name
is not available in Home
.
To pass params to tab navigator React Navigation 5, we create a context and set put the value we want in the context. Then any component inside the context provider can access the value. export const NetworkContext = React. createContext();
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' } });
Normal props on a Navigator component can be used to configure the navigator.
To send arbitrary props to the screens, you have to use screenProps
.
So for example:
<StudentStackNav screenProps={{ name: 'Lucy' }}/>
Which will be available in StudentLogin
as this.props.screenProps
.
screenProps
is documented on this page
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