Apply borderRadius on bottom tab bar

user_11726569 0
Viewed 6623

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

react-native
5 Answers

You can remove the white space using style 

const DEVICE_WIDTH = Dimensions.get('window').width;

const BottomTabNavigator = createBottomTabNavigator({
    HomeScreenStack,

    },
    {
        tabBarOptions: {
            style:{
              borderTopLeftRadius:21, 
              borderTopRightRadius:21,
              backgroundColor:"#000000",
              position:'absolute',
              bottom: 0,
              padding:10,
              width: DEVICE_WIDTH,
              height: 54,
              zIndex: 8 
           }
        }
    }
)

Hope this helps

user_108286010

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!

user_85681590

Here is how I do it:

<Tab.Navigator
   tabBarOptions={{
      borderTopLeftRadius: 40,
      borderTopRightRadius: 40,
      marginTop: -40,
    }}

This will make the background be the screen. However you will also need to add a marginBottom:40 to each of your screens so that any components can be fully viewed.

user_6953400

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>

user_140845380 
tabBarOptions={{
        showLabel: false,
        activeTintColor: 'white',
        inactiveTintColor: 'gray',
        style: {
          backgroundColor: 'blue',
          borderTopLeftRadius: 25,
          borderTopRightRadius: 25,
          position: "absolute",
          bottom: 0,
        },
      }}
user_91665290
Related