CODEWITHSUNDEEP
react-native
Unknown
Unknown

Reputation: 119

How can I pass parameters to another tab navigation screen

Hi guys I'm still new to react native, I wanted to ask how can I pass a parameter to another screen? I'm currently doing a login system which going to access the email of the user and show their email on their profile page after they logged in. I've tried { this.props.navigation.state.params.Email } in the profile.js but it shows an error says that

TypeError: undefined is not an object (evaluating 'this.props.navigation.state.params')

I saw some related solutions as well but those were for stack navigator but I'm using bottom tab navigation so I wasn't sure if they work in the same way.

login.js

this.props.navigation.navigate('Profile', { Email: email });

app.js


export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={getTransaction} />
        <Tab.Screen name="addTransaction" component={addTransaction} />
        <Tab.Screen name="Register" component={register} />
        <Tab.Screen name="Login" component={login} />
        <Tab.Screen name="Profile" component={profile} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Upvotes: 2

Views: 3520

Answers (2)

Nathace
Nathace

Reputation: 486

in your Profile screen page:

export const profile = ({route}) => {

const { Email } = route.params;

}

Then you can use 'Email' as a regular constant.

Upvotes: 2

marty
marty

Reputation: 106

https://reactnavigation.org/docs/params/

I believe you should get the params from props.router instead of props.navigation.

Upvotes: 1

Related Questions