How can I access initialParams on functional components React Navigation-CodePudding

I'm trying to pass some props to Stack.screen component but I can't find a way to access them on functional component

App.js

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

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          initialParams={{ user: { user }, setUser: { setUser } }}
          name="Login"
          component={LoginScreen}
          options={{ title: 'Login' }}
        />
        <Stack.Screen user={user} name="Home" component={Dashboard} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

LoginScreen.js

Here I'm trying to set token to User with setUser hook but I don't know how to take that prop.

function LoginScreen({ navigation, user, setUser }) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleEmailChange = (email) => {
        setEmail(email);
    }
    const handlePasswordChange = (password) => {
        setPassword(password);
    }
    const handleSubmit = async () => {
        try {
            const response = await fetch('https://mytodoappbackend.herokuapp.com/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    email: email,
                    password: password
                })
            })
            // navigation.navigate('Home', { name: 'Jane' })
            const responseJson = await response.json();
            if (responseJson.token) {
                setUser(responseJson.token);
                navigation.navigate('Home', { name: 'Jane' })
            } else {
                Alert.alert('Hata', 'Kullanıcı adı veya şifre hatalı');
            }
            console.log(responseJson);
        } catch (err) {
            console.log(err);
        }
    }

    return (
       ...
    );
}

CodePudding user response：

You can do a small tweak on your app.js.

Pass user={user} and setUser = {setUser} to stack Screen. This means you need to catch user and setUser as params on LoginScreen which you already have

<Stack.Screen
      user ={user}
      setUser = { setUser }
      name="Login"
      component={LoginScreen}
      options={{ title: 'Login' }}
 />

CodePudding user response：

The initialParams prop of the StackNavigator, or by any other navigator in react-native-navigation, can be accessed from the route prop that is passed by the navgigator to any component that is a Screen.

Hence, you can not destructure them directly from props. You need to access them via the route as follows.

function LoginScreen({ navigation, route }) {
    console.log(route.params)
}

Or if you have many route params, then you can still use destructuring as follows.

function LoginScreen({ navigation, route }) {
    const {user, setUser} = route.params
}

Edit: By the way, you should not pass functions as route params, but this is a different problem…