Question 35051 in React native Question posted in
The official React Native documentation can be found here.

React Native Bottom Tab Navigation content styling

I am coding an app with a bottom Tab Navigator nested within a Stack Navigator, I am trying to target the content styling for all the screen within this Tab.Navigator but the commands I am using are not working

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function TabNavigator(){
  return (
    <Tab.Navigator
      // tabBarOptions={{
      //   style: {backgroundColor: "#511cff"} // deprecated metro says to place it into screenOptions under tabBarStyle
      // }}
      screenOptions={{
        // headerStyle: { backgroundColor: "#2f28fc" },
        tabBarActiveTintColor: "#F8F2DA",
        tabBarOptions:{
          contentStyle: {backgroundColor:"#511cff"},
          sceneContainerStyle: {backgroundColor:"#511cff"},
        },
        tabBarStyle: {
          backgroundColor: "#2f28fc",
          contentStyle: {backgroundColor:"#511cff"},
          sceneContainerStyle: {backgroundColor:"#511cff"},
        },
        contentStyle: {backgroundColor:"#511cff"},
        sceneContainerStyle: {backgroundColor:"#511cff"},
        headerShown: false,
      }}
    >
    </Tab.Navigator>
  )
}

export default function App() {
  return (
    <>
      <StatusBar style="light" />
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerStyle: { backgroundColor: "#2f28fc" },
            headerTintColor: "#F8F2DA",
            sceneContainerStyle: { backgroundColor: "#511cff" }
          }}
        >
          <Stack.Screen
            name='ExpensesView'
            component={TabNavigator}
            screenOptions={{
              sceneContainerStyle:{ backgroundColor: "#511cff" },
              contentStyle: {backgroundColor:"#511cff"}
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

From looking through here: https://github.com/react-navigation/react-navigation/issues/8076
I think the solution would be to use the sceneContainerStyle property within Navigator like so:

<Tab.Navigator
  sceneContainerStyle= {{
    backgroundColor: "#511cff"
  }}
Tags:

2

Answers


  1. 0

    I read the documentation for you and found that you syntax is not valid.
    Their is nothing like tabBarOptions in it.

    here’s the link of how we can use the options in tab Bar
    https://reactnavigation.org/docs/screen-options

    Hope this will help u.

    Login or Signup to reply.
  2. 0

    I was able to solve this by using sceneContainerStyle property outside of the screenOptions property. Why they have moved it out of the screenOptions for just TabNavigator is a mystery, but it works.

    CODE:

    <Tab.Navigator
  tabBar={props => <CustomTabBar {...props} />}
  screenOptions={({ route }) => ({
    headerShown: false,
  })}
  sceneContainerStyle={styles.sceneStyle}>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search