CODEWITHSUNDEEP
androidreactjsreact-nativeexporeact-navigation
Naman Agrawal
Naman Agrawal

Reputation: 11

Change background-color of Tab.screen in bottomTabNavigation

I want to remove the purple background colour, but searched but unable to find a solution (https://i.sstatic.net/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>```

Upvotes: 1

Views: 57

Answers (3)

Gattu
Gattu

Reputation: 133

may be this will work you!

  screenOptions={({ route }) => ({
        headerShown: false,
        tabBarLabelStyle:{fontSize:13},
        tabBarInactiveTintColor: "#7F8487",
        tabBarActiveTintColor: "#7F8487",
        tabBarStyle: {
          // backgroundColor:'#AD40AF'
          height: 65,
          paddingBottom: 10,
        },

Upvotes: 0

M.N.
M.N.

Reputation: 108

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>

Here is example code:

      return focused ? (
        <View
          style={{
            minHeight: 10,
            minWidth: 10,
            paddingHorizontal: 10,
            backgroundColor: 'pink',
            borderRadius: 10,
          }}>
          <ExploreTabIconSvg color={COLORS.PLUM} />
        </View>
      ) : (
        <ExploreTabIconSvg />
      )

enter image description here

Upvotes: 0

Mahir Altınkaya
Mahir Altınkaya

Reputation: 439

You can try this;

screenOptions={

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

Upvotes: 1

Related Questions