I applied borderTopLefRadius and borderTopRightRadius: So this is the result of my custom tab navigator, but I want to remove that white background color, but I don´t know how

This is my code:

        <Tabs.Navigator screenOptions={{
            headerShown: false,
            tabBarStyle: {
                borderTopRightRadius: 15,
                borderTopLeftRadius: 15,
                height: 60,
            },                  
        }}>

CodePudding user response：

Try adding a theme with a transparent background to your NavigationContainer:

<NavigationContainer theme={navigationTheme}>
  <Tab.Navigator screenOptions={{
    headerShown: false,
    tabBarStyle: {
      borderTopRightRadius: 15,
      borderTopLeftRadius: 15,
      height: 60,
      },                  
    }}
  >
  {/* screens */}
  </Tab.Navigator>
</NavigationContainer>

const navigationTheme = {
  colors: {
    background: "transparent",
  },
};

CodePudding user response：

I have already found the solution:

    <Tabs.Navigator
        screenOptions={{
            headerShown: false,
            tabBarStyle: styles.tab,
            tabBarLabelStyle: styles.label,
        }}
        sceneContainerStyle={{ backgroundColor: colors.background }}
    >