Is there any way to check if screen is in bottom tab navigation - react navigation 5.X

Question

I need to check if screen is rendered in Bottom Tab Navigation (with Bottom Tab Bar) or in stack navigation (without tab bar). Same screen is used in both Bottom Tab Navigation and Stack Navigation.

Can I add check and render components based on type of navigation in which screen is rendered?

Answer 1

You can do something like:

navigation.dangerouslyGetState().type // 'tab' or 'stack'

Though it'll return 'tab' for any type of tab navigator, not just bottom tabs.

Answer 2

I see what you're trying to achieve. I have encountered this in React Native, and for what it's worth, when creating my bottom tabs navigator, the simplest solution is to add initial route parameters to your component like this:

    <Tab.Navigator
      initialRouteName={Routes.firstScreen}
      screenOptions={{headerShown: false}}>
              <Tab.Screen
                component={SomeComponent}
                initialParams={{IsTabbed:true}}
                options={{tabBarShowLabel: false}}
              />
    </Tab.Navigator>

And then check it out from route parameters and can do whatever I wish.

const SomeComponent = ({route, navigation}) => {
  const IsTabbed = route.params;
...
}

Note: if you have the same component elsewhere and don't need to check if it's from tab navigation, simply omit adding an initialParam.

Hope this helps.