How to fix The action 'NAVIGATE' with payload?

Issue

I am developing my mobile app with React Native and I'm having an issue with navigation. I started by developing the HomeScreen, FormatioScreen, AddParticipantScreen, and SummaryScreen. I recently developed an authentication page to provide access to all pages only to the admin.

Players, on the other hand, should only have access to the FormationScreen. The navigation works fine on HomeScreen and app.js, but I don't understand why it's not functioning on my AuthScreen. I am a beginner developer.

//AuthScreen.js
import React, { useState, useEffect, } from 'react';
import { View, Text, Button, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useFocusEffect } from '@react-navigation/native';
import { NavigationContainer } from '@react-navigation/native';


export default function AuthScreen({ setIsAdmin }) {
  const [password, setPassword] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const navigation = useNavigation();
  console.log('Navigation in AuthScreen:', navigation);


  const navigateToFormation = () => {
    navigation.navigate('Formation');
  };


  const handleAdminLogin = () => {
    if (password === 'test') {
      setIsAdmin(true);
      setIsAuthenticated(true);
    } else {
      alert('Mot de passe incorrect');
    }
  };

  const handlePlayerLogin = () => {
    setIsAdmin(false);
    setIsAuthenticated(true);
    console.log('After navigation to Formation');
  };
  
  useFocusEffect(
    React.useCallback(() => {
      if (isAuthenticated) {
        console.log('Navigating to Formation');
        // Déplacer la navigation à l'intérieur du useEffect
        const navigateToFormation = () => {
          navigation.navigate('Formation');
        };
        navigateToFormation();
      }
    }, [navigation, isAuthenticated])
  );
  
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Page d'authentification</Text>
      <TextInput
        style={styles.input}
        placeholder="Mot de passe"
        secureTextEntry
        onChangeText={(text) => setPassword(text)}
      />
      <Button title="Se connecter en tant qu'admin" onPress={handleAdminLogin} />
      <Button title="Se connecter en tant que joueur" onPress={handlePlayerLogin} />
      <TouchableOpacity style={styles.button} onPress={navigateToFormation}>
          <Text style={styles.buttonText}>🏐 JOUEURS 🏐</Text>
        </TouchableOpacity>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
    padding: 8,
    width: '80%',
  },
});

//app.js
import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Provider } from 'react-redux';
import store from './store';
import HomeScreen from './screens/HomeScreen';
import FormationScreen from './screens/FormationScreen';
import SummaryScreen from './screens/SummaryScreen';
import AddParticipantsScreen from './screens/AddParticipantsScreen';
import AuthScreen from './screens/AuthScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  const [isAdmin, setIsAdmin] = useState(false);
  const [isAuthenticated, setIsAuthenticated] = useState(false);


  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName='Auth'>
          {isAdmin ?   (
            <>
              <Stack.Screen name="Accueil" component={HomeScreen} />
              <Stack.Screen name="Formation" component={FormationScreen} />
              <Stack.Screen name="Résumé" component={SummaryScreen} />
              <Stack.Screen
                name="Ajouter Participants"
                component={AddParticipantsScreen}
              />
            </>
          ) : (
            <Stack.Screen name="Auth">
              {(props) => <AuthScreen {...props} setIsAdmin={setIsAdmin} setIsAuthenticated={setIsAuthenticated} />}
            </Stack.Screen>
          )}
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

PS: I don't need advanced security measures for the app; it's just for recreational purposes. No sensitive data will be stored in the code.

I have tried many things that I found here and in the React Native nested navigation documentation, but I haven't succeeded.

Solution

Do not manually navigate to conditionally rendering screens. Use the separate set of screens for different roles. Here is a simple example:

export default function App() {
  const [role, setRole] = useState(null);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {role == 'admin' ? (
          <>
            <Stack.Screen name="Admin" component={AdminScreen} />
            <Stack.Screen name="Settings" component={SettingsScreen} />
            ...
          </>
        ) : role == 'player' ? (
          <>
            <Stack.Screen name="Player" component={PlayerScreen} />
            <Stack.Screen name="Settings" component={SettingsScreen} />
            ...
          </>
        ) : (
          <>
            <Stack.Screen
              name="SignIn"
              component={() => <SignInScreen setRole={setRole} />}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

See Authentication flows for more information.

Answered By - user18309290