React native Question posted in
The official React Native documentation can be found here.

Change background on Tab react native app

enter image description here

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>
  );
}
Tags:

3

Answers


  1. 0

    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)

    Login or Signup to reply.
  2. 0

    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>
  );
}
    Login or Signup to reply.
  3. 0

    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

    image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search