How to pass parameters to routes using tab navigator (createMaterialBottomTabNavigator)?

Question

I am using createMaterialBottomTabNavigator and I want to pass parameters to the routes:

return (
   <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="Home" component={home_customers} />
      <Tab.Screen name="Favorites" component={favorite_vendors} />
      <Tab.Screen name="More" component={settings_screen} />
   </Tab.Navigator>
);

I could only find an attribute called initialParams which I am not sure if it is the right thing to use in this case. So, what I want to do is to GET parameters from the previous screen and PASS that parameter to each of these three screens!

UPDATE

ok, I found out how to GET the parameters but I still don't know how to pass those parameters to route screens!

export default function home_customers_bar({ route, navigation }) {
    const current_city_ = route.params.current_user_city_; //here I get the parameter from the previous screen
    
    return (
        <Tab.Navigator initialRouteName="Home">
            <Tab.Screen name="Home" component={home_customers} />
            <Tab.Screen name="Favorites" component={favorite_vendors} />
            <Tab.Screen name="More" component={settings_screen} />
        </Tab.Navigator>
    );
}

Rone

It's recommended to use something like react context for this reactnavigation.org/docs/upgrading-from-4.x/…. Or Redux if you prefer that. You could also set initialParams for each screen, but this is of course not a good way to do it if all screens need to access current_city_ – Dropsy

@BasvanderLinden actually I need to pass the parameter to only two of the screens. So I can just use initialParams? How can I use it? – Rone

Answer 1

If you only need to pass the data to a limited number of screens you can set the initialParams like this:

export default function home_customers_bar({route, navigation}) {
  const current_city_ = route.params.current_user_city_; //here I get the parameter from the previous screen

  return (
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen
        name="Home"
        component={home_customers}
        initialParams={{currentCity: current_city_}}
      />
      <Tab.Screen
        name="Favorites"
        component={favorite_vendors}
        initialParams={{currentCity: current_city_}}
      />
      <Tab.Screen name="More" component={settings_screen} />
    </Tab.Navigator>
  );
}

Then you can retrieve the params inside a screen component like this:

function home_customers({ route }) {
  const currentCity = route.params.currentCity;

  // Do something with it...
}

---

If you're going to be passing this value around to a lot of different components then it's probably better to use something like react context https://reactnavigation.org/docs/upgrading-from-4.x/#global-props-with-screenprops.

Dropsy

Why is this not working for me even though it looks like something that should work? – Mucosa

Answer 2

The easier way to achieve this is to use React Context API.

I also tried so hard to pass data and states from one screen to another using bottom tabs in react-native but it just was a heavy task and kept having glitches. You may want to clone this repository and study it. It has different screens so I cannot write the codes here but it is helpful and more uncomplicated.

https://github.com/AnatuGreen/ReactNative-ContextAPI-Sample-App

Mucosa

not everyone uses functional component. Dont assume that. – Rone