How do I implement authentication in React Navigation v5?

How do I implement authentication in React Navigation v5?

To implement authentication in React Navigation v5, you can use a combination of stack navigators and conditional rendering based on the authentication state.

Can you provide a code example for that?

Sure! You can create a simple auth flow using a stack navigator for logged-in and logged-out states. Here's a basic example:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isLoggedIn ? (
          <Stack.Screen name="Home" component={HomeScreen} />
        ) : (
          <Stack.Screen name="Login" component={LoginScreen} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

This code switches between the Home and Login screens based on the isLoggedIn state.

What about handling user sessions?

For handling user sessions, you can use AsyncStorage to store the authentication token and check it on app load to determine the user's login state.