Adding padding to react-native bottomTabNavigator-CodePudding

I am trying to figure out how to add some top and bottom padding around my bottom tabs navigator in my react native app. So far any changes I make have no effect. For instance, I tried adding padding: 20 to my style within screenOptions, but this made no difference.

This is my relevant code:

export const ClientScreen = (props) => {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: Colors.primary,
        },
        headerTintColor: Colors.light,
        title: `${props.client?.firstName} ${props.client?.lastName}`,
        tabBarActiveTintColor: Colors.light,
        tabBarInactiveTintColor: Colors.lightInactive,
        tabBarActiveBackgroundColor: Colors.primary,
        tabBarInactiveBackgroundColor: Colors.primary,
        headerLeft: () => (
          <Feather
            name='chevron-left'
            size={24}
            onPress={() => props.navigation.goBack()}
            color={styles.colors.textInverse}
            style={styles.layout.padding.horizontal}
          />
        ),
      }}
      initialRouteName={'Sessions'}
    >
      <Tab.Screen
        name='Sessions'
        component={SessionsTab}
        initialParams={props}
        options={{
          tabBarLabel: 'SESSIONS',
          tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Chart'
        component={ChartTab}
        initialParams={props}
        options={{
          tabBarLabel: 'CHARTS',
          tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Goals'
        component={GoalsTab}
        initialParams={props}
        options={{
          tabBarLabel: 'GOALS',
          tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
        }}
      />
    </Tab.Navigator>
  );
};

CodePudding user response：

based on the react-native-navigation docs you need to use the option tabBarStyle here's a the docs

or just add this:


        <Tab.Navigator
      screenOptions={{
        tabBarStyle: { padding: 20 },
      }}
    >