How do I implement authentication in React Navigation?

How do I implement authentication in React Navigation?

To implement authentication in React Navigation, you can use a combination of stack and tab navigators along with a context provider for managing authentication state.

Can you provide a code example for that?

Sure! First, set up your navigators. Then, create a context for authentication. Here's a basic example:

import React, { createContext, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const AuthContext = createContext();
const Stack = createStackNavigator();

function App() {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      <NavigationContainer>
        <Stack.Navigator>
          {user ? (
            <Stack.Screen name="Home" component={HomeScreen} />
          ) : (
            <Stack.Screen name="Login" component={LoginScreen} />
          )}
        </Stack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

What about handling user sessions?

You can use AsyncStorage to persist user sessions. When the user logs in, save their token in AsyncStorage and retrieve it on app startup to check if they're authenticated.