how do I style my react native top tab navigation to have a background color and icons

Question

I am a bit new to react native and I am having a bit of difficulty styling my top tab navigation

how do I style my react native top tab navigation to have a background color and icons

See code to my top tab navigation in react native

I have tried all I know, nothing seems to be working

see how I want it to look

see how it looks

see my code below

import "react-native-gesture-handler"
import React from "react"
import { DefaultTheme } from "@react-navigation/native"
import { AppearanceProvider, useColorScheme } from "react-native-appearance"
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"

import { PersonalSetupScreen } from "./tabs/personal-setup"
import { CompanySetupScreen } from "./tabs/company-setup"
import { Images } from "../../config"

const Tab = createMaterialTopTabNavigator()
const MyDarkTheme = {
  // Ovverride dark theme with your theme
  dark: true,
  colors: {
    primary: "rgb(255, 255, 255)",
    background: "rgb(33, 20, 122)",
    card: "rgb(255, 255, 255)",
    text: "rgb(255, 255, 255)",
    border: "rgb(199, 199, 204)",
    notification: "rgb(255, 69, 58)",
  },
}

export default function HomeTabs() {
  const scheme = useColorScheme()

  return (
      <Tab.Navigator >
        <Tab.Screen
          name="PersonalSetup"
          component={PersonalSetupScreen}
          options={({ navigation }) => ({
            tabBarLabel: "Personal Details",
            activeTintColor: "#21147a",
            inactiveTintColor: "21147a",
            activeBackgroundColor: "#21147a",
            inactiveBackgroundColor: "#21147a",
            style: {
              backgroundColor: "#21147a",
            },
          })}
        />
        <Tab.Screen
          name="CompanySetup"
          component={CompanySetupScreen}
          options={({ navigation }) => ({
            tabBarLabel: "Company Details",
            activeTintColor: "#21147a",
            inactiveTintColor: "21147a",
            activeBackgroundColor: "#21147a",
            inactiveBackgroundColor: "#21147a",
            style: {
              backgroundColor: "#21147a",
            },
          })}
        />
      </Tab.Navigator>
  )
}

Answer 1

According to the documentation here: Material Top Tab Navigator

You can pass in a tabBarIcon .

You can also pass your own custom component as a TabBar Button that you can style however you want (Text + Icon + BackgroundColor ...)

Answer 2

you might have already found out the solution.

Here is the complete example from reactnavigation.org .

import { Animated, View, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation, position }) {
  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            // The `merge: true` option makes sure that the params inside the tab screen are preserved
            navigation.navigate({ name: route.name, merge: true });
          }
        };    

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        const inputRange = state.routes.map((_, i) => i);
        const opacity = position.interpolate({
          inputRange,
          outputRange: inputRange.map(i => (i === index ? 1 : 0)),
        });

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Animated.Text style={{ opacity }}>
              {label}
            </Animated.Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

// ...

<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
  {...}
</Tab.Navigator>

Reference: https://reactnavigation.org/docs/material-top-tab-navigator/#tabbar

For more information, please go through this link .

Answer 3

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const TopTab = createMaterialTopTabNavigator();

const Tab = () => {
return (
   <TopTab.Navigator 
    screenOptions={{
      tabBarActiveTintColor:'white',
      tabBarIndicatorStyle: {
        backgroundColor: 'white',
        height: 2
      },
      tabBarScrollEnabled: true,
      tabBarLabelStyle: {fontSize: 20},
      tabBarItemStyle: { width: 150, },
      tabBarStyle: {
        height: 40,
        backgroundColor: '#c21a0c',
      },
    }}
    >
     <TopTab.Screen name ='PERSONAL DETAILS' component={Personal} Options={{
         tabBarIcon: () => (
        <MaterialCommunityIcons name="search-web" size={24} />
      )}} />
      <TopTab.Screen name ='COMPANY DETAILS' component = {Company} />
      <TopTab.Screen name ='CONTACT DETAILS' component = {FOX} />
      <TopTab.Screen name ='PROFILE' component = {Google} />
    </TopTab.Navigator>
)
}