CODEWITHSUNDEEP
react-nativereact-native-navigation
Rabino
Rabino

Reputation: 11

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"
  }}

Upvotes: 1

Views: 3588

Answers (2)

Aayush
Aayush

Reputation: 3098

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}>

Upvotes: 2

Ark
Ark

Reputation: 26

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.

Upvotes: 0

Related Questions