CODEWITHSUNDEEP
reactjsreact-nativereact-navigation-v5react-navigation-stackreact-navigation-top-tabs
Ghayoor ul Haq
Ghayoor ul Haq

Reputation: 820

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

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?

Upvotes: 0

Views: 2096

Answers (2)

Anass
Anass

Reputation: 349

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.

Upvotes: 0

satya164
satya164

Reputation: 10152

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.

Upvotes: 1

Related Questions