I'm trying to pass some props to Stack.screen component but I can't find a way to access them on functional component
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>
);
}
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 (
...
);
}
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…