Change background-color of Tab.screen in bottomTabNavigation-CodePudding

I want to remove the purple background colour, but searched but unable to find a solution (https://i.stack.imgur.com/GNsJf.png)

There is option for Top tabs navigation in tabBarOptions but for bottomTabs navigation there is no option Here is my code:

<Tab.Navigator
      inactiveColor="#808093"
      activeColor="#0D6FB5"
      initialRouteName="Home"
      shifting={true}
      sceneAnimationType={false}
      barStyle={{
        backgroundColor: '#fff',
        borderTopColor: '#808093',
      }}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          switch (route.name) {
            case 'Home':
              iconName = focused ? 'ios-home' : 'ios-home-outline';
              break;
            case 'Chat':
              iconName = focused
                ? 'ios-chatbubble-ellipses'
                : 'ios-chatbubble-ellipses-outline';
              break;
            case 'Connections':
              iconName = focused ? 'ios-person-add' : 'ios-person-add-outline';
              break;
            case 'Account':
              iconName = focused
                ? 'ios-person-circle'
                : 'ios-person-circle-outline';
              break;
            default:
              break;
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={22} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Connections" component={ConnectionsScreen} />
      <Tab.Screen name="Chat" component={ChatScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>```

CodePudding user response：

You can try to return not only icon, but full component. Like this:

<View style={{width: 80, height: 60, borderRadius: 20, backgroundColor: 'purple }}>
  <Ionicons name={iconName} size={22} color={color} />
</View>

CodePudding user response：

You can try this;

screenOptions={

 tabBarActiveTintColor: 'tomato',
 tabBarInactiveTintColor: 'gray',
}