1

I am using react native bottom navigation 6. I want to get the navigation and state but it returns undefined.

export default function Navigation() {
  return (
    <NavigationContainer linking={LinkingConfiguration}>
      <RootNavigator />
    </NavigationContainer>
  );
}


const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      <Stack.Screen name="Root" component={BottomTabBar} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}

/**
 * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */

This here returns null ({ navigation, state,descriptors }: BottomTabBarProp) I wanted to use the state.index to get the current tab and show a different icon/svg. My alternative is to use focused.

const BottomTab = createBottomTabNavigator<RootTabParamList>();

const BottomTabBar = ({ navigation, state,descriptors }: BottomTabBarProps) => (
  <>
  <BottomTab.Navigator 
  initialRouteName="Feed"
  screenOptions={{
    tabBarShowLabel: false,
    tabBarActiveTintColor: Colors.activeNavIcon,
    tabBarInactiveTintColor: Colors.inactiveNavIcon
  }}
>
  <BottomTab.Screen
    name="Feed"
    component={FeedNavigator}
    options={{
      tabBarIcon: ({ color, size, focused }) => (
        focused ?
          <HomeActive width={size} height={size} color={color} />
          : <Home width={size} height={size} color={color} />
      ),
    }}
  />

 
  <BottomTab.Screen
    name="Profile"
    component={ProfileNavigator}
    options={{
      tabBarIcon: ({ color, size, focused  }) => (
        focused ?
        <ProfileActive width={size} height={size} color={color} />
        : <Profile width={size} height={size} color={color} />
      ),
    }}
  />
</BottomTab.Navigator>
  </>
);
VDTe
  • 438
  • 1
  • 4
  • 17
  • You are rendering a navigator as bottom tab bar or what are you trying to do? It's strange to expect `BottomTabBarProps` in a regular component. They are available only in a custom bottom tab bar specified in the `tabBar` prop of the tab navigator. – satya164 Oct 20 '21 at 18:38
  • "show a different icon/svg" where do you want to show a different icon? – satya164 Oct 20 '21 at 18:39
  • Just want to use the navigation and state. if state==0 ?: – VDTe Oct 21 '21 at 05:59

1 Answers1

1

As you are using functional component. I would recommend to use Hooks provided by react-navigation.

useNavigation

Link to Docs

useNavigationState

Link to Docs

const BottomTabBar = () => {

   const navigation = useNavigation()
  
   return (
     <>
     <BottomTab.Navigator 
       initialRouteName="Feed"
       screenOptions={{
         tabBarShowLabel: false,
         tabBarActiveTintColor: Colors.activeNavIcon,
         tabBarInactiveTintColor: Colors.inactiveNavIcon
       }}
     />
  ...............
  ...............
  ..............
>
  )
}
Ferin Patel
  • 3,424
  • 2
  • 17
  • 49
  • Hi thanks for the answer. I'm confused where do I put const routesIndex = useNavigationState(state => state.index); I get hook error – VDTe Oct 20 '21 at 11:38
  • @VincentDaveNavaresTe i have updated my answer, please check it. Please upvote and accept my answer if its solves your problem – Ferin Patel Oct 20 '21 at 11:42
  • I am using this const routesIndex = useNavigationState(state => state.index); but for some reason it is always returning 1. Wanted to know which tab is currently active – VDTe Oct 20 '21 at 11:46
  • It is getting the stack state not the bottom nav. Any ideas how to get bottom nav state? – VDTe Oct 20 '21 at 11:54
  • you cannot get State of BottomNav from same component, You can only get BottomState from its child components. – Ferin Patel Oct 20 '21 at 11:56