1

Currently I have set the background color in the tab navigator.

<Tab.Navigator
      tabBar={(props) => <CustomBottomTab {...props} />}
      screenOptions={({ route, navigation }) => ({
      ...
      tabBarStyle: 
          {
            display: 'flex',
            backgroundColor: colors.black_015
          },

But this only works on the tabs that doesn't have a stack on them and their color changes correctly to darker color and the tabs with the stacks their color is white or white with bit of gray.

I have tried to do following in my home stack

const HomeStack = () => {
  const navigation = useNavigation()
  const route = useRoute()

useEffect(() => {

    const tabShownRoutes = [
      'HomeScreen',
    ]

    if (tabShownRoutes.includes(getFocusedRouteNameFromRoute(route))) {
      navigation.setOptions({ tabBarStyle: { backgroundColor: colors.black_015 } })
    }

  }, [navigation, route])

This works but only if I navigate to another screen in that stack.

Before (After opening application)

enter image description here

And after when going to one of the screens in the stack.

enter image description here

How can I make it to stay black color?

Jukka Koivu
  • 269
  • 4
  • 15
  • if (tabShownRoutes.includes(getFocusedRouteNameFromRoute(route))) { navigation.setOptions({ tabBarStyle: { backgroundColor: colors.black_015 } }) } have you checked with setting color with else part.. – Manojkanth May 17 '22 at 16:56

0 Answers0