Bottom Tabs active color does not change; focused toggles to false

[lucksp]

I want to style my bottom tabs so that the text color changes, and a bottom border appears when the tab is focused so I can determine if it's active. Something is toggling the focused callback between true & false:

export default function TabLayout() {
  const { theme } = useTheme();
  return (
    <Tabs
      screenOptions={{
        title: '',
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          tabBarLabelStyle: { color: theme.colors.main.dark, fontSize: 12 },
          tabBarLabel: 'Main',
          tabBarIcon: args => {
            console.log('Main args');
            console.log(args);

            return <Feather name="home" size={24} /> />;
          },
        }}
      />
      <Tabs.Screen
        name="search"
        options={{
          tabBarLabelStyle: { color: theme.colors.main.dark, fontSize: 12 },
          tabBarLabel: 'Search',
          tabBarIcon: args => {
            console.log('Search args');
            console.log(args);

            return <Feather name="search" size={24} />;
          },
        }}
      />
    </Tabs>
  );
}

If I am on the home tab screen & then click Search, this is the console output to match the above console.log()'s:

 LOG  Home args
 LOG  {"color": "rgb(0, 122, 255)", "focused": true, "size": 25}
 LOG  Home args
 LOG  {"color": "#8E8E8F", "focused": false, "size": 25}
 LOG  Search args
 LOG  {"color": "rgb(0, 122, 255)", "focused": true, "size": 25}
 LOG  Search args
 LOG  {"color": "#8E8E8F", "focused": false, "size": 25}
 LOG  Home args
 LOG  {"color": "rgb(0, 122, 255)", "focused": true, "size": 25}
 LOG  Home args
 LOG  {"color": "#8E8E8F", "focused": false, "size": 25}
 LOG  Search args
 LOG  {"color": "rgb(0, 122, 255)", "focused": true, "size": 25}
 LOG  Search args
 LOG  {"color": "#8E8E8F", "focused": false, "size": 25}

I would have expected the Search args to have a focused: true, which it does, but then get toggled to false.

As you can see, focused is false for all of them. Why could this be?

[satya164]

Nothing is getting toggled. Two versions of the component are rendered and are switched between depending on the focus.

[lucksp]

why do both end up in a false state? It toggles from true to false in the same screen change

[satya164]

Like I wrote two versions are rendered. Nothing is getting toggled.

[lucksp]

I am not sure I follow.
Those logs are from a SINGLE click on Search tab. How would you capture the focused component, so that props like tabBarActiveTintColor can be utilized, so the background changes color if it's active?

[satya164]

Those logs are from a SINGLE click on Search tab.

There are 2 versions rendered all the time - both of them re-render when you click.

How would you capture the focused component, so that props like tabBarActiveTintColor can be utilized, so the background changes color if it's active?

You don't capture anything. You get the color and the focused state in the function's argument that you need to use to specify the color or styling and the appropriate version is displayed to the user.

[lucksp]

Yes I think we’re aligned in that theory. During a single click action on SEARCH, what could be the cause of the tabs not keeping focused as true, when the url path is “search”?

 LOG  Search args
 LOG  {"color": "rgb(0, 122, 255)", "focused": true, "size": 25}
 LOG  Search args
 LOG  {"color": "#8E8E8F", "focused": false, "size": 25}

Does my code relating to Tabs look ok?

can you provide a snippet or documentation reference on what might fix this?