React Native - How to send params/props to a BottomTabNavigator using React Navigation 5?

Question

I'm creating an app with React Native and i need to send params from one screen to all of the screens of a tab Navigator.

Screen summary:

Login
Home
Profile (Tab)
Settings (Tab)

I need to send the name of the user from Login to Home and from Home to Profile and Settings

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Settings from './Screens/Settings';
import Profile from './Screens/Profile';
import Home from './Screens/Home';
import Login from './Screens/Login';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function TabRoutes() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'Profile') {
            iconName = focused ? 'home' : 'home';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'cog' : 'cog';
          }
          return <Icon name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}
    >
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Tabs" component={TabRoutes} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Login.js

export default class Login extends React.Component {
  render() {
    return (
      <View>
        <Text>Welcome</Text>
        <Button title="Log in" onPress={() => this.props.navigation.navigate('Home', {name: 'Sergio'})}/>
      </View>
    )
  }
}

Home.js -> Here i need to send to all the tabs the name of the user

export default class Home extends React.Component {
  render() {
    const { name} = this.props.route.params;
    return (
      <View>
        <Text>Home</Text>
        <Text>Hello {name}</Text>
        <Button title="GO TO TABS" onPress={() => this.props.navigation.navigate('Tabs')}/>
      </View>
    )
  }
}

Profile.js

export default class Profile extends React.Component {

  render() {
    return (
      <View>
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        />
        <Text>Profile</Text>
        <Text>Hello @</Text> //Here i want to see the name of the user
      </View>
    );
  }
}

How am I sending and receiving the parameters

From Login to Home:

Login.js:

<Button title="Log in" onPress={() => this.props.navigation.navigate('Home', {name: 'Sergio'})}/>

Home.js:

const { name} = this.props.route.params;
console.log(name); //The result is Sergio

From Home to Profile/Settings:

Home.js:

<Button title="GO TO TABS" onPress={() => this.props.navigation.navigate('Tabs', {name})}/>

Profile.js:

v1 = const { name} =  this.props.navigation.state.params.name
v2 = const { name} = this.props.route.params;
console.log(name); //In both the value is undefined

Hey, did you find a solution ? Im stuck with the same problem — R1', May 09 '20 at 20:03

codehesh · Answer 1 · 2020-04-01T16:14:00.407

0

onPress(name) {
 this.props.navigation.navigate('Tabs'),
    { name },
  );
}

Access it like this

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

edited Apr 01 '20 at 16:14

answered Apr 01 '20 at 11:28

codehesh

875
10
29

I had tried it but i get an error: 'undefined is not an object' – S3rgiiO Apr 01 '20 at 11:34
Can you check if you are getting a value from const { name} = this.props.route.params; – codehesh Apr 01 '20 at 11:58
At the home screen i have a value, but on the tab screens i get undefined. – S3rgiiO Apr 01 '20 at 12:54
Edited the answer. check and let me know – codehesh Apr 01 '20 at 16:14
Same error. I dont know why i can send a param from login to home but not from home to profile/settings(tabs). – S3rgiiO Apr 02 '20 at 09:46
Did you try this? – codehesh Apr 02 '20 at 09:48
Yes. I send the name from login to home and i can see the value, but when i send to profile/settings the value is undefined. – S3rgiiO Apr 02 '20 at 09:57
I think earlier login to home also get undefined right? How do you send the value to profile/settings ? Update the question. I'll help – codehesh Apr 02 '20 at 10:14
Added at the end of the question how I am sending the parameters. – S3rgiiO Apr 02 '20 at 10:41

score 0 · Answer 2 · edited Nov 13 '20 at 10:38

If you are using react native navigation 5 then you can do something like this:

From Component A:

import { useNavigation } from "@react-navigation/native";

const navigation = useNavigation();

onPress={() => navigation.navigate("Profile", { name })}

From Component B:

import { useNavigation } from "@react-navigation/native";

const navigation = useNavigation();

const routeIndex = navigation.dangerouslyGetState().index;

const name =  navigation.dangerouslyGetState().routes[routeIndex].params.name

React Native - How to send params/props to a BottomTabNavigator using React Navigation 5?

2 Answers2