Dynamic initialRouteName in BottomTabNavigator - React Navigation v5

Question

I want to set a dynamic initialRouteName on my TabNavigator (not even sure if this is the right place to do it), let me explain more clearly.

I have a BottomTabNavigator with 4 items : Home (HomeStack), Explorer (ExplorerStack), subscriptions (SubscribeStack) & contact (contactStack). When the app load, with the token I was redirecting the user to my MainNavigator (so my BottomTabNavigator) with the initialRouteName Home.

<Stack.Navigator headerMode="none">
 {!token ? (
  <Stack.Screen
    isSignout={isSignout}
    name="AuthStack"
    component={AuthNavigator}
  />
  ) : (
   <Stack.Screen name="HomeStack" component={MainNavigator} />
  )}
</Stack.Navigator>

What I want to do now is : when the user is not null and have no subscriptions I want to redirect him directly to the Explorer Tab and not the Home Tab.

// MainNavigator.js

const MainNavigator = (props) => {
 const [loading, setLoading] = useState(true);
 const [subs, setSubs] = useState([]);

 const [fetchData, {data: meData}] = useLazyQuery(USER_ME_QUERY);

 useEffect(() => {
  fetchData();
    if (meData) {
      setSubs(meData.me.subscribes);
      setLoading(false);
    }
 }, [meData]);

 if (loading) {
   return <Loading />;
 }

 return (
  <Tab.Navigator
      initialRouteName={subs.length > 0 ? 'Home' : 'Explorer' }
      tabBarOptions={{
        shadowColor: 'transparent',
        showLabel: false,
        style: {
          backgroundColor: dark ? theme.color.secondary : theme.color.white,
          elevation: 0, // for Android
          borderTopColor: dark ? '#46505C' : theme.color.lightBorder,
        },
      }}>
      <Tab.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarIcon: ({focused}) =>
            focused ? (
              <Icon size={22} name="home" color={theme.color.primary} />
            ) : (
              <Icon size={22} name="home" color={theme.color.lightGrey} />
            ),
        }}
      />
      <Tab.Screen
        name="Explorer"
        component={ExplorerStack}
        options={{
          tabBarIcon: ({focused}) =>
            focused ? (
              <Icon size={22} name="columns" color={theme.color.primary} />
            ) : (
              <Icon size={22} name="columns" color={theme.color.lightGrey} />
            ),
        }}
      />
      <Tab.Screen
        name="Subscribe"
        component={SubscribeStack}
        options={{
          tabBarIcon: ({focused}) =>
            focused ? (
              <Icon size={22} name="sliders" color={theme.color.primary} />
            ) : (
              <Icon size={22} name="sliders" color={theme.color.lightGrey} />
            ),
        }}
      />
      <Tab.Screen
        name="Contact"
        component={ContactStack}
        options={{
          tabBarIcon: ({focused}) =>
            focused ? (
              <Icon size={22} name="mail" color={theme.color.primary} />
            ) : (
              <Icon size={22} name="mail" color={theme.color.lightGrey} />
            ),
        }}
      />
 </Tab.Navigator>
  );
};

export default MainNavigator;

Is there a simple way to achieve this ? Any help would be appreciated x If you need more infos, feel free to ask :)

Thanks in advance x

you can get values of user and subscription before navigators are called. then pass the value to main navigator as props — Muhammed Yasir MT, Sep 02 '21 at 13:00
so you can hide the splashscreen after all required values are aquired and avoid any other loading like as in main navigator in you file — Muhammed Yasir MT, Sep 02 '21 at 13:02
@MuhammedYasirMT Thank you for your answer. So if I'm correct, something like this : https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props So instead of , I do this ? {props => } — Prisca Aure, Sep 02 '21 at 13:12
yes, and use that in MainNavigator as props.extraData in your case — Muhammed Yasir MT, Sep 02 '21 at 13:17
Thank You @MuhammedYasirMT for your time ! I'm gonna try to implement that right now :) — Prisca Aure, Sep 02 '21 at 13:23
@MuhammedYasirMT Working like a charm ! Didn't know it was that easy :) Thank you very much for the effective answer :) — Prisca Aure, Sep 02 '21 at 13:33

Dynamic initialRouteName in BottomTabNavigator - React Navigation v5

0 Answers0