Is there a way to make tab unactive from nested stack?

Question

I have Tab navigation in place and each tab has it's own stack navigation.

However, on certain screens inside stack navigations I would want to make the tab button inactive or at least change it's color manually.

So for example: Tabs - (A,B) Stack A - (XYZ) Stack B - (123)

When we click the A tab it gets highlighted, but when I go to A-Y screen I would want A tab button to become inactive.

So is there anyway to alter the options of tab navigation from stack navigation?

Answer 1

For now ended up doing this solution, example not cleaned code:

    <Tab.Screen
    component={SettingsStack}
    name="Profiles"
    options={({ navigation }) => {
      const settingsStack = navigation.getState().routes.find((route: any) => route.name === "Profiles");
      const settingsRouteName = getFocusedRouteNameFromRoute(settingsStack);
      const shouldBeFocused = settingsRouteName === "Profiles" || !settingsRouteName;
      return {
        tabBarIcon: ({ color }) => {
          return <ProfilesSVG color={color} width={ICON_SIZE_SMALL} height={ICON_SIZE_SMALL} />;
        },
        headerShown: false,
        tabBarActiveTintColor: shouldBeFocused ? colors.main : "gray",
      };
    }}
  />

Was hoping I could find something more... elegant but this has to do for now.