Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass a parameter in react native navigator?

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.

like image 495
PYL Avatar asked May 07 '17 08:05

PYL


People also ask

How do I pass parameters to Tab Navigator?

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();

How do you send data with navigate in react?

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' } });


1 Answers

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

like image 91
Koen. Avatar answered Sep 19 '22 14:09

Koen.