ALCode
0
Ive got the state: const [isPressed, setIsPressed] = useState(false) Then I want to pass the setIsPressed when navigating to another sreen, which i wrote: On the from Screen: onPress{() => navigation.navigate('Map', {setIsPressed})} On the to Screen: onPress={() => {navigation.navigate('DM'); setIsPressed(true);}}
However, I get an error saying 'setIsPressed is not a function' when pressing on the To Screen button
How do I fix this?
This is the way you can do it, here is you first screen:
const togglePressed = () => setIsPressed(prev=>!prev);
onPress={() =>
navigation.navigate('ScreenName', {
onRefreshParent: () => togglePressed(),
})
}
And in you other screen use it like this:
onPress={() => route.params.onRefreshParent && route.params.onRefreshParent()}
There are two pieces to this: 1. Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function: navigation.navigate('RouteName', { /* params go here */ }). 2. Read the params in your screen component: route.params.
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
/* 1. Navigate to the Details route with params */
navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
</View>
);
}
function DetailsScreen({ route, navigation }) {
/* 2. Get the param */
const { itemId, otherParam } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
<Button
title="Go to Details... again"
onPress={() =>
navigation.push('Details', {
itemId: Math.floor(Math.random() * 100),
})
}
/>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}