React native bottom tab bar dynamic loading - react-native

Question

I am trying to implement a bottom tab bar with custom tabs. for example, my tab names are a, b, c, and d in some other cases my tab bar names are k, l, m, and n. How to handle this type of scenario. Currently, my component looks like the below. I tried various ways unable to do it. I tried using the map function also it's working.
Tabbar.js
const LoginStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Home"
component={Home}
options={({ route }) => ({
title: route.params?.title,
headerBackVisible: false,
})}
/>
</Stack.Navigator>
);
};
const Tabs = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === "LOGIN") {
iconName = focused ? loginAct : loginInAct;
} else if (route.name === "A") {
iconName = focused ? aAct : aInAct;
} else if (route.name === "B") {
iconName = focused ? bAct : bInAct;
} else if (route.name === "C") {
iconName = focused ? bAct : bInAct;
} else if (route.name === "D") {
iconName = focused ? dAct : dInAct;
}
// You can return any component that you like here!
return <Image source={iconName} style={{ width: 20, height: 20 }} />;
},
tabBarActiveTintColor: "#007abc",
tabBarInactiveTintColor: "#000000",
})}
>
<Tab.Screen name="LOGIN" component={LoginStack} />
<Tab.Screen name="A" component={A} />
<Tab.Screen name="B" component={B} />
<Tab.Screen name="C" component={C} />
<Tab.Screen name="D" component={D} />
</Tab.Navigator>
);
};