react navigation infinite re-render when separating navigators files - reactjs

Question

I want to separate my navigation code into separate files, 3 files to be precise and I want to load a stack navigator depending on the role of the user, which I will receive on the logging in process (like 3 separate apps), the problem is that if I would've kept the file stacked together it'll be very huge file
here is my main navigation file
import * as React from 'react';
// Apps Navigators
import VendorNavigator from '#vendor-app/routes';
// utils
import Api from '#utils/api';
import AsyncStorage from '#react-native-community/async-storage';
import Container from '#components/container';
// Icons
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
// contexts
const AuthContext = React.createContext(null);
// navigators
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
// import Screens
// Public Screens
import LoginScreen from '#layouts/auth/login';
import PasswordReset from '#layouts/auth/password-reset';
import PasswordResetCode from '#layouts/auth/password-reset-code';
import NewPassword from '#layouts/auth/new-password';
const Navigator = () => {
const AuthStack = createStackNavigator();
const Authenticated = createStackNavigator();
const UnAuthenticated = createStackNavigator();
React.useEffect(() => {
const bootstrapAsync = async () => {
await verifyUser();
let token = await AsyncStorage.getItem('access_token');
if (!token)
dispatch({ type: 'SIGN_OUT' })
else
dispatch({ type: 'SIGN_IN', token: token})
}
bootstrapAsync()
}, [])
const verifyUser = async () => {
let response = await Api.get('/auth/verify-token');
if (response && response.status_code == 200) {
let token = await AsyncStorage.getItem('access_token');
dispatch({ type: 'SIGN_IN', token: token })
} else {
dispatch({ type: 'SIGN_OUT' })
}
}
const authContext = React.useMemo(
() => ({
signIn: async (email_address, password, app) => {
let response = await Api.post(`auth/login`, {
email_address: email_address,
password: password,
});
if (response && response.status_code == 200) {
await AsyncStorage.setItem('access_token', response.data.access_token)
await AsyncStorage.setItem('refresh_token', response.data.refresh_token)
await AsyncStorage.setItem('user', JSON.stringify(response.data.user))
dispatch({ type: 'SIGN_IN', token: response.data.access_token });
}
return response;
},
signOut: async () => {
await AsyncStorage.removeItem('access_token')
await AsyncStorage.removeItem('refresh_token')
await AsyncStorage.removeItem('user')
dispatch({ type: 'SIGN_OUT' })
},
signUp: async data => {
dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
},
}),
[]
);
const [state, dispatch] = React.useReducer(
(prevState, action) => {
switch (action.type) {
case 'SIGN_IN':
return {
...prevState,
is_authenticated: true,
token: action.token,
is_loading: false
};
case 'SIGN_OUT':
return {
...prevState,
is_authenticated: false,
token: null,
is_loading: false
}
}
},
{
is_loading: true,
is_authenticated: false,
token: null
}
)
function AuthenticatedStack() {
return (
<Authenticated.Navigator>
{/*
The idea is to have a conditional route here depending on the user's role, for example:
{
user.role == 'vendor'
? <Authenticated.Screen options={{headerShown: false}} name={'Tabs'} component={VendorNavigator} />
: user.role == 'collector'
? <Authenticated.Screen options={{headerShown: false}} name={'Tabs'} component={CollectorNavigator} />
: null
}
*/}
<Authenticated.Screen options={{headerShown: false}} name={'Tabs'} component={VendorNavigator} />
</Authenticated.Navigator>
)
}
function UnAuthenticatedStack() {
return (
<UnAuthenticated.Navigator
screenOptions={{
headerShown: false
}}>
{/* Login and password resets */}
<UnAuthenticated.Screen name={'Login'} component={LoginScreen} />
<UnAuthenticated.Screen name={'PasswordReset'} component={PasswordReset} />
<UnAuthenticated.Screen name={'PasswordResetCode'} component={PasswordResetCode} />
<UnAuthenticated.Screen name={'NewPassword'} component={NewPassword} />
</UnAuthenticated.Navigator>
)
}
return (
<Container blockRender is_loading={state.is_loading}>
<AuthContext.Provider value={authContext}>
<AuthStack.Navigator>
{
state.is_authenticated
? <AuthStack.Screen options={{headerShown: false}} name={'Home'} component={AuthenticatedStack} />
: <AuthStack.Screen options={{headerShown: false}} name={'Login'} component={UnAuthenticatedStack} />
}
</AuthStack.Navigator>
</AuthContext.Provider>
</Container>
)
}
export {AuthContext};
export default Navigator;
and here is my nested stack
import React from 'react';
// utils
import Api from '#utils/api';
import AsyncStorage from '#react-native-community/async-storage';
import Container from '#components/container';
// Icons
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
// navigators
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
// import Screens
import ListScreen from '#layouts/list';
import RetailerScreen from '#layouts/list/retailer';
import RetailerInvoiceScreen from '#layouts/list/retailer/invoice';
import CreateInvoiceScreen from '#layouts/list/retailer/create-invoice';
import CreateUserScreen from '#layouts/list/create-user';
import MapScreen from '#layouts/map';
import SettingsScreen from '#layouts/settings';
function VendorNavigator() {
const tabNavigatorConfig = ({ route }) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName;
if (route.name == 'Retailers')
iconName = focused ? 'store' : 'store-outline';
else if (route.name == 'Map')
iconName = focused ? 'map-sharp' : 'map-outline';
else if (route.name == 'Settings')
iconName = focused ? 'settings' : 'settings-sharp';
return route.name == 'Retailers' ? (
<MaterialCommunityIcons name={iconName} color={color} size={size} />
) : (
<Ionicons name={iconName} color={color} size={size} />
)
}
})
const TabNavigator = createBottomTabNavigator();
const RetailersListStack = createStackNavigator();
function RetailersScreensAndSubScreens() {
return (
<RetailersListStack.Navigator
screenOptions={{
headerShown: false
}}>
<RetailersListStack.Screen name={'Retailers'} component={ListScreen} />
<RetailersListStack.Screen name={'Retailer'} component={RetailerScreen} />
<RetailersListStack.Screen name={'RetailerInvoice'} component={RetailerInvoiceScreen} />
<RetailersListStack.Screen name={'CreateRetailer'} component={CreateInvoiceScreen} />
<RetailersListStack.Screen name={'CreateUser'} component={CreateUserScreen} />
</RetailersListStack.Navigator>
)
}
return (
<TabNavigator.Navigator
screenOptions={tabNavigatorConfig}
tabBarOptions={{
activeTintColor: '#33A788',
inactiveTintColor: '#000000',
}}>
<TabNavigator.Screen name={'Retailers'} component={RetailersScreensAndSubScreens} />
<TabNavigator.Screen name={'Map'} component={MapScreen} />
<TabNavigator.Screen name={'Settings'} component={SettingsScreen} />
</TabNavigator.Navigator>
)
}
export default VendorNavigator;
the app loads initially in a perfect way, but as soon as I navigate, it triggers an infinite re-render.