Page d'authentification en react native

Bonjour,
Pour mon projet d'étude je développe une application et dans cette application j'ai ajouté   une page d'authentification le problème c'est que le système d'authentification marche puisque quand je rentre des mdp erronés l'alerte id incorrecte apparait mais lorsque les ids sont bon le bouton connecter ne me redirige pas vers la page Acceuil  voici le code de la page authentification  :

import React, { useState, useEffect } from 'react';

import { View, Text, TextInput, Button, AsyncStorage, StyleSheet } from 'react-native';

import { useNavigation } from '@react-navigation/native';

const AuthenticationScreen = ({ onLogin }) => {

  const [username, setUsername] = useState('');

  const [password, setPassword] = useState('');

  const [authenticated, setAuthenticated] = useState(false);

  useEffect(() => {

    checkAuthenticationStatus();

  }, []);

  const checkAuthenticationStatus = async () => {

    const isAuthenticated = await AsyncStorage.getItem('authenticated');

    setAuthenticated(isAuthenticated === 'true');

  };

  const navigation = useNavigation();

  const handleLogin = async () => {

    console.log('Bouton de connexion cliqué');

    try {

      const predefinedAccounts = [

        { username: 'Tarek', password: 'projet' },

        { username: 'user2', password: 'pass2' },

      ];

      const matchedAccount = predefinedAccounts.find(

        (account) => account.username === username && account.password === password

      );

      if (matchedAccount) {

        await AsyncStorage.setItem('authenticated', 'true');

        setAuthenticated(true);

        setUsername(matchedAccount.username);

        onLogin(); // Appeler la fonction onLogin pour mettre à jour l'état d'authentification dans App.js

        // La redirection vers l'écran "Acceuil" peut également être effectuée ici

        navigation.navigate('Acceuil');

      } else {

        alert('Identifiants incorrects');

      }

    } catch (error) {

      console.error('Erreur de connexion:', error.message);

    }

  };

  const handleLogout = async () => {

    await AsyncStorage.removeItem('authenticated');

    setAuthenticated(false);

  };

  return (

    <View style={styles.container}>

      {authenticated ? (

        <>

          <Text>Bienvenue, {username} !</Text>

          <Button title="Se déconnecter" onPress={handleLogout} />

        </>

      ) : (

        <>

          <TextInput

            style={styles.input}

            placeholder="Nom d'utilisateur"

            value={username}

            onChangeText={setUsername}

          />

          <TextInput

            style={styles.input}

            placeholder="Mot de passe"

            secureTextEntry

            value={password}

            onChangeText={setPassword}

          />

          <Button title="Se connecter" onPress={handleLogin} />

        </>

      )}

    </View>

  );

};




const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  input: {

    height: 40,

    borderColor: 'gray',

    borderWidth: 1,

    marginBottom: 10,

    paddingLeft: 8,

    width: 200,

  },

});

export default AuthenticationScreen;

Et voici le code dans l'app.js : 

import React, { useState, useEffect } from 'react';

import { View, Text, StyleSheet, Button, Alert } from 'react-native';

import { NavigationContainer, useNavigation } from '@react-navigation/native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import AsyncStorage from '@react-native-async-storage/async-storage';

import AuthenticationScreen from './components/Identification';

import Recherche from './components/recherche';

import DisplayAnImage from './components/switch';

const Tab = createBottomTabNavigator();

const App = () => {

  return (

    <NavigationContainer>

      <AppContent />

    </NavigationContainer>

  );

};

const AppContent = () => {

  const [authenticated, setAuthenticated] = useState(false);

  const navigation = useNavigation();

  useEffect(() => {

    const checkAuthenticationStatus = async () => {

      const isAuthenticated = await AsyncStorage.getItem('authenticated');

      setAuthenticated(isAuthenticated === 'true');

    };

    checkAuthenticationStatus();

  }, []);

  const handleLogin = () => {

    // Appeler la fonction onLogin pour mettre à jour l'état d'authentification dans App.js

    setAuthenticated(true);

    // Naviguer vers l'écran "Acceuil"

    navigation.navigate('Acceuil');

  };

  return (

    <>

      {authenticated ? (

        <Tab.Navigator>

          <Tab.Screen name='Acceuil' component={AcceuilScreen} />

          <Tab.Screen name="Search" component={Searchscreen} />

          <Tab.Screen name="Image" component={ImageScreen} />

        </Tab.Navigator>

      ) : (

        <AuthenticationScreen onLogin={handleLogin} />

      )}

    </>

  );

};

A savoir que je code sur expo snack est ce un problème ? 

EDIT MODERATION : Ajout des balises de code