How to know which Stack.Screen I'm on?

Question

I have this Tab Screen.

  <Tabs.Screen
    name="Photo"
    options={{
      tabBarIcon: ({ focused, color, size }) => null,
    }}
  >
    {() => <StackNavFactory screenName="Photo" />}

As you can see if I click Photo tab, It goes to 'StackNavFactory screenName=Photo'.

StackNavFactory has these two Stack screens.

It has Photo stack screen and Comments stack screen.

  {screenName === "Photo" ? (
    <Stack.Screen name="Photo" component={Photo} />
  ) : null}

  <Stack.Screen
    name="Comments"
    component={Comments}
    options={{
      headerTintColor: "white",
    }}
  />

Since It should go to screenName="Photo" first, when I click Photo tab, It goes to Photo Stack screen.

But if I click some button on Photo screen, I set It goes to Comments Stack screen on the same Photo tab.

In summary Photo tab has two stack screen Photo and Comments.

And I want to know where I'm on photo or Comments from TabBar components.

Answer 1

There are several ways to get the focused route name. In this use case, you can use the getFocusedRouteNameFromRoute(route) function.

(Untested) example:

<Tabs.Navigator
  screenOptions={({ route }) => ({
    tabBarStyle: {
      display: getFocusedRouteNameFromRoute(route) === "..." ? "..." : "...",
    },
  })}
>
  ...
</Tabs.Navigator>

Also, you can read Setting parent screen options based on the child navigator's state in the official documentation to learn more.