I have my authContext set up like this
export const AuthContext = createContext({
token: "",
isAuthenticated: false,
user: "",
isNewUser: false, // New state to track if the user is new
authenticate: (token) => {},
setUser: (user) => {},
setIsNewUser: (isNewUser) => {}, // New function to update the new user state
logout: () => {},
});
function AuthContextProvider({ children }) {
const [authToken, setAuthToken] = useState();
const [userID, setUserID] = useState();
const [isNewUser, setIsNewUser] = useState(false); // State to track if the user is new
function authenticate(token) {
setAuthToken(token);
}
useEffect(() => {
const getStore = async () => {
try {
let user = await SecureStore.getItemAsync('userToken');
if (user) {
user = JSON.parse(user);
authenticate(user[0]);
setUser(user[1]);
}
} catch (e) {
console.error('Error loading auth state', e);
} finally {
setIsAuthInitialized(true); // Ensure auth state is ready
}
};
getStore();
}, []);
function logout(navigation) {
SecureStore.deleteItemAsync('userToken')
.then(() => {
setTimeout(() => {
setUserID(null);
setAuthToken(null);
setIsNewUser(false);
}, 0); // Let the navigation stack settle
})
.catch((error) => console.error('Error during logout:', error));
}
and my app.js
function AuthenticatedStack() {
const authCtx = React.useContext(AuthContext);
const themeCtx = React.useContext(ThemeProvider)
return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName={authCtx.isNewUser ? "Welcome" : "Dashboard"} // Dynamically set initial route
>
<Stack.Screen name="Dashboard" component={Dashboard} />
<Stack.Screen name="Welcome" component={Welcome} />
</Stack.Navigator>
);
}
function AuthStack() {
return (
<Stack.Navigator initialRouteName='Intro' screenOptions={{ headerStyle: { backgroundColor: 'red' } }}>
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Intro" component={Intro} options={{ headerShown: false }} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} options={{ headerShown: false }} />
<Stack.Screen name="Signup" component={Signup} options={{ headerShown: false }} />
</Stack.Navigator>
);
}
function Navigation() {
const authCtx = React.useContext(AuthContext);
return authCtx.isAuthenticated ? (
<NavigationContainer>
<AuthenticatedStack />
</NavigationContainer>
) : (
<NavigationContainer>
<AuthStack />
</NavigationContainer>
);
}
export default function App() {
const [fontsLoaded, error] = useFonts(customFonts);
useEffect(() => {
if (fontsLoaded) {
SplashScreen.hideAsync(); // Hide the splash screen once fonts are loaded
}
}, [fontsLoaded]);
if (!fontsLoaded) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="#BA83DE" />
</View>
);
}
return (
<Provider store={store}>
<ThemeProvider>
<NotificationsProvider>
<AuthContextProvider>
<Navigation />
</AuthContextProvider>
</NotificationsProvider>
</ThemeProvider>
<StatusBar backgroundColor="black" />
</Provider>
);
}
When i logout after eas dev build/prod it says Cannot remove child at index 0 from parent ViewGroup[458], only 1 children in parent. Warning childCount may be incorrect! What could be the solution to this as it is not rendering the authstack after clearing the token. It works fine in expo go but not in dev/production build?