React native bottom tab bar navigation - react-native

Question

Hi I am using TabNavigator for showing tabs in bottom, Initially everything was working fine when tabs where only 4 as tabs are increased to 6tabs now they are congested and not looking properly, Can we add one more button on last and show the extra 2 tabs in that popover as like teams app.any help to achive this.
below is my code of TabNavigator:
<Tab.Navigator
// initialRouteName='StartupContainer'
screenOptions={({ route }) => ({
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarStyle: {
elevation: 0,
borderTopWidth: 0,
backgroundColor: "#F1F1F1",
height: 70,
paddingBottom: 10,
fontFamily: "Outfit-Medium",
},
tabBarIcon: ({ focused, iconColor, iconName }) => {
if (route.name === "Dashboard") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/dashboardIcon.png");
title = "dddd";
} else if (route.name === "My Tasks") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/MyTasks.png");
title = "dddd";
} else if (route.name === "Job Openings") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/JobOpenings.png");
title = "aaaaa";
} else if (route.name === "Candidates") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/Candidates.png");
title = "5555";
} else if (route.name === "Users") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/users.png");
title = "users";
} else if (route.name === "Contracts") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/contracts.png");
title = "Contracts";
} else if (route.name === "Assign Tasks") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/assign_tasks.png");
title = "AssignTasks";
} else {
// iconColor = focused ? '#3a86fe' : 'white'
// iconName = 'user'
}
return <Image style={{ tintColor: iconColor }} source={iconName} />;
},
// title:"My Tasks",
tabBarShowLabel: true,
tabBarLabelStyle: { color: "#021668" },
})}
>
{userDetails.role_id === 0 ? (
<>
<Tab.Screen name="Dashboard" component={DashboardStack} />
<Tab.Screen name="My Tasks" component={MyTaskStack} options={{unmountOnBlur: true}}/>
<Tab.Screen name="Job Openings" component={JobOpeningsStack} options={{unmountOnBlur: true}}/>
<Tab.Screen name="Candidates" component={CandidateStack} options={{unmountOnBlur: true}}/>
</>
) : (
<>
<Tab.Screen name="Dashboard" component={AdminDashboardStack} />
<Tab.Screen name="Assign Tasks" component={AdminTasksStack} />
<Tab.Screen name="Users" component={AdminUsersStack} />
<Tab.Screen name="Contracts" component={AdminContractsStack} />
<Tab.Screen name="Job Openings" component={AdminJobOpeningsStack} />
<Tab.Screen name="Candidates" component={AdminCandidateStack} options={{unmountOnBlur: true}} />
</>
)}
</Tab.Navigator>

Answer 1

oh... Tab.Screen has tabBarIcon option. for example,
import React from "react";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import HomeScreen from "./tabs/home";
import BoardScreen from "./tabs/board";
import MyPageScreen from "./tabs/my_page";
import colors from "./utils/colors";
import { Image, StyleSheet } from "react-native";
import dp from "./utils/dp";
const Tab = createBottomTabNavigator();
export default function Tabs() {
const tabs = [
{
name: "Home",
screen: HomeScreen,
iconPath: require("./icons/home_icon.png"),
iconOffPath: require("./icons/home_icon_off.png"),
},
{
name: "Board",
screen: BoardScreen,
iconPath: require("./icons/board_icon.png"),
iconOffPath: require("./icons/board_icon_off.png"),
},
{
name: "MyPage",
screen: MyPageScreen,
iconPath: require("./icons/mypage_icon.png"),
iconOffPath: require("./icons/mypage_icon_off.png"),
},
];
return (
<Tab.Navigator
screenOptions={{
headerShown: false,
tabBarStyle: {
backgroundColor: colors.BackgroundColor(),
},
}}
sceneContainerStyle={{ backgroundColor: colors.BackgroundColor() }}>
{tabs.map((value, index) => (
<Tab.Screen
key={index}
name={value.name + "Screen"}
component={value.screen}
options={{
tabBarShowLabel: false,
tabBarIcon: ({ focused }) =>
focused ? (
<Image source={value.iconPath} style={styles.icon} />
) : (
<Image source={value.iconOffPath} style={styles.iconOff} />
),
}}
/>
))}
</Tab.Navigator>
);
}
const styles = StyleSheet.create({
icon: {
width: dp(24),
height: dp(24),
resizeMode: "contain",
tintColor: colors.MainColor(),
},
iconOff: {
width: dp(24),
height: dp(24),
resizeMode: "contain",
tintColor: "gray",
},
});