Adding padding to react-native bottomTabNavigator - react-native

Question

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

Answer 1

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