How to jump to the specific initial tab route dynamically route name? - reactjs

Question

I have problem jump to the specific tab navigation base on my dynamic initial route name.
Here is the scenario:
If the user just want to login, The initial route of Auth tab navigation must be on ProductBrowsing
If the user first time in the application and user register in the app, The initial route of Auth tab navigation must be on AddProduct.
Problem: When I login the screen not changing the screen stuck on login the navigation replace is not working.
Handler Login:
const HandlerLoginBtn = async () => {
const user_data = {
mobile_number: username,
password: password
}
await dispatch(LoginAuthentication(user_data)).then((res) => {
if(res?.payload?.message == 'Login Success') {
if(redirection == 'ProductBrowsing') {
navigation.replace('ProductBrowsing')
}
else if(redirection == 'AddProduct') {
navigation.replace('AddProduct')
}
}
})
}
Auth Tab:
function AuthenticateTabNav() {
return (
<Tab.Navigator tabBarOptions={{
inactiveTintColor: '#032363',
labelStyle: { fontSize:12, fontWeight:'500'},
style: {
backgroundColor: '#ffff',
}
}}
>
<Tab.Screen
options={{
tabBarLabel: 'BUY',
tabBarIcon: ({ focused , color, size }) => (
focused ? (
<Image h="4" w="4"
source={require('./assets/tab_icons/buy/blue_buy.png')}></Image>
): (
<Image h="4" w="4"
source={require('./assets/tab_icons/buy/black_buy.png')}></Image>
)
),
}}
name="ProductBrowsing"
component={ProductBrowsingScreen}
/>
<Tab.Screen
options={{
tabBarLabel: 'SELL',
tabBarIcon: ({ focused , color, size }) => (
focused ? (
<Image h="4" w="4"
source={require('./assets/tab_icons/sell/blue_sell.png')}></Image>
): (
<Image h="4" w="4"
source={require('./assets/tab_icons/sell/black_sell.png')}></Image>
)
),
}}
name="AddProduct"
component={AddProductScreen}
/>
</Tab.Navigator>
)
}
Navigation:
const AuthenticatedNav = () => {
const {redirection} = useSelector((state) => state.user)
const [firstScreen, setFirstScreen] = useState('');
console.log(firstScreen)
useEffect(() => {
setFirstScreen(redirection)
}, [])
return (
<Stack.Navigator initialRouteName={firstScreen == '' ? 'ProductBrowsing' : 'AddProduct'} headerMode='none'>
<Stack.Screen component={AuthenticateTabNav} name={firstScreen == '' ? 'ProductBrowsing' : 'AddProduct' } />
</Stack.Navigator>
)
}
Redux State:
builder.addCase(LoginAuthentication.fulfilled, (state, action) => {
if(action.payload?.message == 'Invalid Username Or Password') {
state.auth_access = []
state.isLoggedIn = false
state.isLoading = false
state.redirection = ''
}else {
state.auth_access = action.payload
state.isLoggedIn = true
state.redirection = 'ProductBrowsing'
}
})

Answer 1

I've made a full sample here https://snack.expo.dev/O3vW24UCl
If I understand correctly, you want to navigate from one tab to another depending on the user login state.
Changing the initialRouteName on the main Stack is not useful as you are moving within the tabs in your case.
What you want to do is the same but on the Tab.Navigator.
const Tabs = () => {
const isUserLoggedIn = useSelector((state) => {
return state.isUserLoggedIn;
});
return (
<Tab.Navigator
initialRouteName={isUserLoggedIn ? "AddProduct" : "ProductBrowsing"}
>
<Tab.Screen
options={{
tabBarLabel: 'BUY',
}}
name="ProductBrowsing"
component={ProductBrowsingScreen}
/>
<Tab.Screen
options={{
tabBarLabel: 'SELL',
}}
name="AddProduct"
component={AddProductScreen}
/>
</Tab.Navigator>
);
};
Obviously, in the sample the state is not persisted.