0

enter image description here

({ headerShown: false, tabBarStyle:{ borderTopLeftRadius: 50, borderTopRightRadius: 50, height: 90, backgroundColor: '#ffffff', color:'black', }, 
  tabBarIcon: ({ focused, color, size }) => {
    let iconName;
   
    if (route.name === 'Home') {
      iconName = focused ? 'home' : 'home-outline';
    } else if (route.name === 'Tracking') {
      iconName = focused ? 'navigate' : 'navigate-outline';
    }
    else if (route.name === 'Setting') {
      iconName = focused ? 'settings' : 'settings-outline';
    }

    // You can return any component that you like here!
    return <Ionicons name={iconName} size={size} color={color} />;
  },
  tabBarActiveTintColor: '#0B82E9',
  tabBarInactiveTintColor: '#948F8F',

})} 
>
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="Tracking" component={Tracking} />
  <Tab.Screen name="Setting" component={Setting} />
  
</Tab.Navigator>

in this code, I want to change the border radius of the navigation bar but the result it turn into this. the background color is appeared. how can I remove that (the bg color is not that color I changed it in the app.js file to meet the upper container )

Philip Bright
  • 1
  • Looks like there went something wrong when pasting your code. Looks like a formatting issue – RubenSmn Feb 05 '23 at 17:34
  • [This](https://stackoverflow.com/questions/61105084/how-to-set-the-background-color-of-tab-navigator) may help – vignesh Feb 06 '23 at 05:59

0 Answers0