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)
And after when going to one of the screens in the stack.
How can I make it to stay black color?