function getFocusedRouteNameFromRoute return undefined route name

Question

I want to get the name of the route that is in focus now, but the getFocusedRouteNameFromRoute function always returns "undefined" in the last route.

My code is like this:

return (
<Tab.Navigator
  tabBarOptions={{
    activeTintColor: Colors.iconColor,
    inactiveTintColor: Colors.iconColor,
    inactiveBackgroundColor: Colors.white,
    activeBackgroundColor: Colors.white,
    style: {
      backgroundColor: Colors.white,
    },
  }}
  screenOptions={({ route }) => {
    return {
      tabBarVisible: ["Home", "Forum", "Notification", "Profile"].includes(
        getFocusedRouteNameFromRoute(route)
      ),
    };
  }}
>
  <Tab.Screen
    name="HomeStack"
    component={HomeStack}
  />
  <Tab.Screen
    name="ForumStack"
    component={ForumStack}
  />
  <Tab.Screen
    name="NotificationStack"
    component={NotificationStack}
  />
  <Tab.Screen
    name="ProfileStack"
    component={SettingsStack}
  />
</Tab.Navigator>);

when I log, the result is like this:

screenOptions={({ route }) => {
    console.log('focus ',getFocusedRouteNameFromRoute(route))
    return {
      tabBarVisible: ["Home", "Forum", "Notification", "Profile"].includes(
        getFocusedRouteNameFromRoute(route)
      ),
    };
  }}

log result :

focus Home
focus Forum
focus Notification
focus undefine

package.json :

"@react-navigation/bottom-tabs": "^5.x",
"@react-navigation/native": "^5.x",

score 0 · Answer 1 · answered Oct 18 '22 at 12:56

0

It will be a little late, but maybe somebody find this useful. According the docs you have to add fallback for getFocusedRouteNameFromRoute(route). Something like that:

const routeName = getFocusedRouteNameFromRoute(route) ?? 'Your first screen name'.

answered Oct 18 '22 at 12:56

Anton Karatkevich

61
4

function getFocusedRouteNameFromRoute return undefined route name

1 Answers1