Apply borderRadius on bottom tab bar

Question

I want to apply radius on bottom tab bar, but on background I have a white view. How can I remove this white view?

const BottomTabNavigator = createBottomTabNavigator({
    HomeScreenStack,
    // ArchiveScreenStack,
    // SettingsScreenStack,
    },
    {
        tabBarOptions: {
            style:{borderRadius:21, backgroundColor:"#000000"}
        }
    }
)

Screen of bottom bar

Answer 1

In the screenOptions of <BottomTabs.Navigator> there is a option of tabBarStyle, define it like this

tabBarStyle: {
                backgroundColor: GlobalStyles.colors.accent500,
                paddingTop: 7,
                borderTopLeftRadius: 24,
                borderTopRightRadius: 24,
                borderLeftWidth: 0.2,
                borderRightWidth: 0.2,
                position: 'absolute',
                overflow: 'hidden',
},

Now you will have rounded corners in bottom tab and also there won't be any background white color

NOTE: screenOptions prop is present in React Navigation v6, for other versions there is prop but with different name, so explore the doc for other versions

Hope this will help you or somebody else...

Thanks!

Answer 2

Wrap <Tab.Navigator> with a view and style it with the backgroundColor you want ex.:

<View style={{flex: 1, backgroundColor: 'green'}}>
  <AppTabs.Navigator
    screenOptions={{
      headerShown: false,
      tabBarStyle: {
        borderTopLeftRadius: 24,
        borderTopRightRadius: 24,
        backgroundColor: 'black',
        height: 68
      }
    }}>
    <AppTabs.Screen name="Home" component={Home} />
  </AppTabs.Navigator>
</View>