React native - Stack Screen flikering on authentication flow - react-native

Question

React native Login Stack Blinks while opening the app, before showing the home page. Using react native navigation V5.
Adding the Token from server to async Storage, then on opening the app, i check for the token in Async storage, if it's not null, i'll navigate to my AppScreens else stay in AuthScreens
AppNavigator
import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {createStackNavigator} from '#react-navigation/stack';
import AsyncStorage from '#react-native-community/async-storage';
import AddUserData from '../lib/UserDetailsHelper';
//Import screens
import Login from '../Login';
import AddReferalCode from '../AddReferalCode';
import AddUserDetails from '../AddUserDetails';
import DrawerNavigator from './DrawerNavigator';
import BuyCoins from '../BuyCoins';
import PriceList from '../PriceList';
//Quick Play
import QuickPlayGameList from '../QuickPlay/GameList';
import QuickplayRoom from '../QuickPlay/RoomCreationScreen';
import QuickPlayWaitingRoom from '../QuickPlay/waitingRoom';
import QuickPlayQuestions from '../QuickPlay/Questions';
import QuickPlayResult from '../QuickPlay/Result';
import RNBootSplash from 'react-native-bootsplash';
const Stack = createStackNavigator();
const AuthStack = createStackNavigator();
const AppStack = createStackNavigator();
const AuthScreens = (props) => (
<AuthStack.Navigator
screenOptions={{
headerShown: false,
headerTransparent: true,
headerTitle: false,
}}>
{/* Common */}
<Stack.Screen {...props} name="Login" component={Login} />
<Stack.Screen name="AddReferalCode" component={AddReferalCode} />
<Stack.Screen name="Add User Details" component={AddUserDetails} />
</AuthStack.Navigator>
);
const AppScreens = () => (
<AppStack.Navigator
screenOptions={{
headerShown: false,
headerTransparent: true,
headerTitle: false,
}}>
<Stack.Screen name="Drawer" component={DrawerNavigator} />
<Stack.Screen name="BuyCoins" component={BuyCoins} />
<Stack.Screen name="PriceList" component={PriceList} />
{/* <Stack.Screen name="Home" component={Home} /> */}
{/* QuickPlay */}
<Stack.Screen name="QuickPlayGameList" component={QuickPlayGameList} />
<Stack.Screen name="QuickplayRoom" component={QuickplayRoom} />
<Stack.Screen
name="QuickPlayWaitingRoom"
component={QuickPlayWaitingRoom}
/>
<Stack.Screen name="QPQuestions" component={QuickPlayQuestions} />
<Stack.Screen name="QPResult" component={QuickPlayResult} />
</AppStack.Navigator>
);
Routes = (props) => {
const [token, setToken] = useState(null);
console.log('Props acc token:' + props.accessToken);
useEffect(() => {
getToken()
.then((token) => {
setToken(token);
})
.finally(async () => {
await RNBootSplash.hide({fade: true});
});
}, []);
const getToken = async () => {
try {
const token = await AsyncStorage.getItem('AccessToken');
const rating = await AsyncStorage.getItem('UserRating');
console.log('first token:' + token);
setToken(token);
AddUserData.addAccessToken(token);
AddUserData.addUserRating(rating);
return token;
} catch (e) {
console.log(e);
}
};
return token ? <AppScreens /> : <AuthScreens />;
};
const mapStateToProps = (state) => {
return {
accessToken: state.userDetails.accessToken,
};
};
export default connect(mapStateToProps, null)(Routes);
The AuthScreen Stack blinking when opening the app.
ScreenRecoding of the issue
https://drive.google.com/file/d/12p2NtxUbfS-eFt5iGM0PAvhuJZJhUyJQ/view?usp=sharing

Answer 1

Please try placing your home screen BEFORE the login screen and see the effet
<AuthStack.Navigator
screenOptions={{
headerShown: false,
headerTransparent: true,
headerTitle: false,
}}>
// >>> PUT HOME SCREEN HERE
{/* Common */}
<Stack.Screen {...props} name="Login" component={Login} />
<Stack.Screen name="AddReferalCode" component={AddReferalCode} />
<Stack.Screen name="Add User Details" component={AddUserDetails} />
</AuthStack.Navigator>
Additional information: (thanks for Thorin's discovery)
Try to add a Splash screen to the project, and add a small time out of say 10ms, it may be able to fix the problem.