expo - React Native Navigation Logout not working for Authentication Stack - Stack Overflow

admin2025-04-16  3

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?

转载请注明原文地址:http://www.anycun.com/QandA/1744752911a87119.html