Change background on Tab react native app

Question

hello, can you help me change the black color under the tabs, this color seems to have its own view or must be changed using props. if it is changed using props, what props might be able to change the color / use other methods that might be possible. If there are references that I can get and can read, maybe I will be happier.

Warm regards

rosid

Thank You

import React from "react";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import { View } from "react-native";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { Tabs } from "expo-router";

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "white",
        tabBarStyle: {
          height: 70,
          borderTopLeftRadius: 40,
          borderTopRightRadius: 40,
          backgroundColor: "black",
        },
        tabBarLabelStyle: {
          fontSize: 12,
          fontWeight: "bold",
          marginBottom: 10,
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => (
            <FontAwesome size={28} name="home" color={color} />
          ),
          headerShown: false,
        }}
      />
      <Tabs.Screen
        name="history"
        options={{
          title: "History",
          tabBarIcon: ({ color }) => (
            <MaterialIcons size={28} name="event-note" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="presence"
        options={{
          title: "Presensi",
          tabBarIcon: ({ color }) => (
            <>
              <View
                style={{
                  borderWidth: 2, // Lebar border
                  borderColor: "white", // Warna border
                  borderRadius: 50, // Membuat border menjadi bulat
                  width: 60,
                  height: 60,
                  justifyContent: "center", // Memusatkan secara horizontal
                  alignItems: "center", // Memusatkan secara vertikal
                  marginBottom: 20,
                  backgroundColor: "black",
                }}
              >
                <FontAwesome size={28} name="map-marker" color="#FF204E" />
              </View>
            </>
          ),
        }}
      />
      <Tabs.Screen
        name="schedule"
        options={{
          title: "Schedule",
          tabBarIcon: ({ color }) => (
            <MaterialIcons size={28} name="schedule" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: "Profile",
          tabBarIcon: ({ color }) => (
            <FontAwesome size={28} name="user-circle" color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

Answer 1

I think there are several ways to achieve this but I do not know exactly which one will work.

You can maybe use the prop tabBarBackground which accepts a component that you can render there, and just render a View with your desired backgroundColor. More on this here

You can also wrap the entire Tab.Navigator with a View like here

In the link above there is also another way of doing it, if you are nesting this Tab.Navigator in another Stack.Navigator (link)

Answer 2

Here is an example

import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile!</Text>
    </View>
  );
}

const CustomTab = ({ state, navigation, descriptors, 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,
    });

    if (!isFocused && !event.defaultPrevented) {
      navigation.navigate(route.name);
    }
  };

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

  return (
    <TouchableOpacity
      accessibilityRole="button"
      accessibilityState={isFocused ? { selected: true } : {}}
      accessibilityLabel={options.tabBarAccessibilityLabel}
      testID={options.tabBarTestID}
      onPress={onPress}
      onLongPress={onLongPress}
      style={{ flex: 1, backgroundColor: isFocused ? '#ff0000' : '#ff00ff' }}>
      <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>{label}</Text>
    </TouchableOpacity>
  );
};

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row', height: 80 }}>
      {state.routes.map((route, index) => {
        return (
          <CustomTab
            state={state}
            descriptors={descriptors}
            navigation={navigation}
            route={route}
            index={index}
          />
        );
      })}
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 3

Try placing your navigation component inside the 'tabBar' property of Tab.Navigator, then use CSS to give it an absolute position.

Tab.Navigator belongs to the navigation library @react-navigation/bottom-tabs