when added authentication state, the screen got stuck at splash screen - reactjs

Question

I am trying to create my Authentication flow where I store my token in async storage, upon mounting my entry point checks the state of token if it is null then it goes to AuthNavigator or RootNavigator, however upon adding the code I have tried build many a times, each time it is being stuck at the splashscreen and not moving forward, my code is as follows:
App.js
import 'react-native-gesture-handler';
import React, {useEffect,useState} from 'react';
import SwitchRootNavigator from './src/navigationNative/AppNavigation';
import AsyncStorage from '#react-native-community/async-storage';
export default function App() {
const [userObject,setUserObject]=useState({});
const getData = async () => {
try {
const jsonValue = await AsyncStorage.getItem('user_object');
// return jsonValue != null ? JSON.parse(jsonValue) : null;
setUserObject(jsonValue);
} catch (e) {
console.log(e);
}
};
useEffect(() => {
getData();
});
return(
<>
{console.log('objjjj',userObject)}
<SwitchRootNavigator signedIn={userObject}/>
</>);
}
AppNavigation.js:
import * as React from 'react';
import {View, Image, Text, Platform} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import LoginScreen from '../screens/authentication/LoginScreen.native';
import OtpScreen from '../screens/authentication/OtpScreen.native';
import HomeScreen from '../screens/HomeScreen/HomeScreen.native';
import ConsultationHomeScreen from '../screens/Consult/ConsultationHomeScreen';
import PlansScreen from '../screens/PlansScreen';
import AcceptInviteScreen from '../screens/AcceptInviteScreen';
import OnlineConsultationWebviewScreen from '../screens/Consult/OnlineConsultationWebviewScreen';
import ActualConsultationWebviewScreen from '../screens/Consult/ActualConsultationWebviewScreen';
import VaccinationDetailreadMoreScreen from '../screens/HomeScreen/screens/Vaccination/VaccinationDetailreadMoreScreen';
import PLActivityPlanner from '../screens/activityplanner/PLActivityPlanner';
import PLActivityPlannerDetail from '../screens/activityplanner/PLActivityPlannerDetail';
import PLActivityPlannerReport from '../screens/activityplanner/PLActivityPlannerReport';
import SymptomChecker from '../screens/symptom-checker/symptom-checker';
import SymptomCheckerSearch from '../screens/symptom-checker/symptom-checker-search';
import symptomCheckerAssessmentReport from '../screens/symptom-checker/symptom-checker-assessment-report';
import SymptomCheckerQA from '../screens/symptom-checker/symptom-checker-question-answer';
import AddChild from '../screens/Child/AddChild';
import BabyAccuteIllnessScreen from '../screens/Consult/BabyAccuteIllnessScreen';
import VaccinationListScreen from '../screens/HomeScreen/screens/Vaccination/VaccinationListScreen';
import VaccinationDetailScreen from '../screens/HomeScreen/screens/Vaccination/VaccinationDetailScreen';
import SymptomCheckerDetailReport from '../screens/symptom-checker/symptom-checker-detail-report';
import TodaysGoalScreen from '../screens/diet/TodaysGoalScreen';
import MealDescriptionScreen from '../screens/diet/MealDescriptionScreen';
import {Images} from '../assets/index.js';
import HomeTabScreen from '../screens/HomeScreen/HomeTabScreen';
const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const AuthStack = createStackNavigator();
function AuthNavigator() {
return (
<AuthStack.Navigator>
<AuthStack.Screen
name="login"
component={LoginScreen}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="otp"
component={OtpScreen}
options={{headerShown: false}}
/>
<AuthStack.Screen name="addchild" component={AddChild} />
<AuthStack.Screen
name="acceptinvitescreen"
component={AcceptInviteScreen}
/>
</AuthStack.Navigator>
);
}
function BottomTabBar() {
return (
<Tab.Navigator
lazy={false}
initialRouteName="Home"
tabBarOptions={{
labelStyle: {
color: '#FF1493',
fontSize: 12,
},
}}>
<Tab.Screen
name="Home"
// uncommnet below line to see new Home Tab
// component={HomeTabScreen}
// uncomment below see old Home Tab
component={HomeScreen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({color, size}) => (
<MaterialIcon name="home" color="#FF1493" size={30} />
),
}}
/>
<Tab.Screen
name="Consult"
component={ConsultationHomeScreen}
initialParams={{
uri: 'https://qa.parentlane.com/doctors/launch-home?app_type=0',
}}
options={{
tabBarLabel: 'Consult',
tabBarIcon: ({color, size}) => (
<FontAwesomeIcon name="stethoscope" color="#FF1493" size={30} />
),
}}
/>
<Tab.Screen
name="Plans"
component={PlansScreen}
options={{
tabBarLabel: 'Plans',
tabBarIcon: ({color, size}) => (
<MaterialCommunityIcons
name="crown-outline"
color="#FF1493"
size={30}
/>
),
}}
/>
</Tab.Navigator>
);
}
function RootNavigator() {
function LogoTitle(props) {
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginVertical: 10,
}}>
<Image
style={{width: 31.44, height: 31.2}}
source={Images.symptomcheck_bot1}
/>
<Text
style={{
marginLeft: 10,
color: '#FFFFFF',
fontStyle: 'italic',
fontSize: 14,
}}>
{props.children}
</Text>
</View>
);
}
return (
<RootStack.Navigator>
<RootStack.Screen
name="Home"
component={BottomTabBar}
options={{headerShown: false}}
/>
<RootStack.Screen
name="online"
component={OnlineConsultationWebviewScreen}
/>
<RootStack.Screen
name="actual"
component={ActualConsultationWebviewScreen}
/>
<RootStack.Screen name="baby" component={BabyAccuteIllnessScreen} />
<RootStack.Screen name="vaccinelist" component={VaccinationListScreen} />
<RootStack.Screen
name="vaccinationdetail"
component={VaccinationDetailScreen}
/>
<RootStack.Screen
name="vaccinereadmore"
component={VaccinationDetailreadMoreScreen}
/>
<RootStack.Screen
name="symptomChecker"
component={SymptomChecker}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Symptom Checker',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
width: '100%',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<RootStack.Screen
name="symptomCheckerSearch"
component={SymptomCheckerSearch}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Hi! I’m ISHA, your health care assistant',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? 0 : 50,
},
headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<RootStack.Screen
name="symptomCheckerQA"
component={SymptomCheckerQA}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Hi! I’m ISHA, your health care assistant',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? 0 : 50,
},
headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<RootStack.Screen
name="symptomCheckerAssessmentReport"
component={symptomCheckerAssessmentReport}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Assessment Report',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
}}
/>
<RootStack.Screen
name="symptomCheckerDetailReport"
component={SymptomCheckerDetailReport}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Detail Report',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -100 : 50,
},
}}
/>
<RootStack.Screen
name="plactivityplanner"
component={PLActivityPlanner}
options={{headerShown: false}}
/>
<RootStack.Screen
name="plactivityplannerdetail"
component={PLActivityPlannerDetail}
options={{headerShown: false}}
/>
<RootStack.Screen
name="plactivityplannerreport"
component={PLActivityPlannerReport}
options={{headerShown: false}}
/>
<RootStack.Screen
name="todaysgoal"
component={TodaysGoalScreen}
options={{headerShown: false}}
/>
<RootStack.Screen
name="mealdesc"
component={MealDescriptionScreen}
options={{headerShown: false}}
/>
</RootStack.Navigator>
);
}
export default function SwitchRootNavigator(props) {
const signedIn = props.signedIn;
return (
<NavigationContainer>
{signedIn != null && signedIn != undefined && signedIn != '' ? (
<RootNavigator />
) : (
<AuthNavigator />
)}
</NavigationContainer>
);
}
the console is showing up to be as follows:
we can clearly see from the above image that the object is null, hence my entrypoint file is rendering, however the app is not moving forward to the LoginScreen.
Kindly help, any lead would be great, thanks.

Answer 1

Looks like it is an infinite loop of useEffect because of no dependency and once it sets the state hook of setUserObject, function component got re-render and re-trigger useEffect.
Please add dependency array empty [] and let me know if it fixes.
Example :
useEffect(() => {
getData();
},[]);