0

I am building a bottom tab navigator with react-navigation (react-native). As you can see in the screen shot i have a borderTopLeftRadius & borderTopRightRadius being applied to my Tab container via tabBarOptions.tabStyle but behind the tab bar itself is a grey background so it's not clear that my tab bar container is in fact curved.

Is there a way to change the background of the container containing my tab bar ?

function RootNavigator() {
  return (
    <NavigationContainer linking={deeplinkConfig} fallback={<Loading />}>
      <Stack.Navigator initialRouteName={routeConfig.mainApp}>
        <Stack.Screen name={routeConfig.mainApp} component={AppNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Tab = createBottomTabNavigator();
export function CustomTabNavigator({tabBarOptions = {}, ...props}) {
  return (
    <Tab.Navigator
      {...props}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
        labelStyle: [styles.labelStyle],
        tabStyle: [styles.tabContainer],
        style: [styles.tabBarContainer],
        ...tabBarOptions,
      }}
    />
  );
}
export const CustomTabScreen = Tab.Screen;

const styles = StyleSheet.create({
  tabBarContainer: {
    backgroundColor: '#f4f4f4',
    marginBottom: 15,
    borderWidth: 1,
    borderBottomWidth: 0,
    borderColor: '#D5D5D5',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  tabContainer: {
    height: 55
  },
  labelStyle: {
    fontSize: 12,
  }
});

u

Sriram
  • 626
  • 7
  • 11
Francis Leigh
  • 1,870
  • 10
  • 25
  • If you could add the parent container code as well, it would be helpful to resolve the issue, as I feel its coming from the parent and not the tabContainer. – Shujath Sep 24 '20 at 15:56
  • @Shujath i have added the root config. `AppNavigator` is the Tabbed Nav – Francis Leigh Sep 24 '20 at 16:03
  • Have you tried, adding a style to `Stack.Nav` using screenOptions={{ headerStyle: { backgroundColor: '#000' }, headerTintColor: '#000', headerTitleStyle: { fontWeight: 'bold' } }} – Shujath Sep 24 '20 at 16:14
  • @Shujath That only changes the *header* styles. My issue is with the bottom tabs – Francis Leigh Sep 24 '20 at 16:17

0 Answers0