Menu
I'm having some trouble with a react-native app. I can't figure out how to pass data across screens.
I realize that there are other similar questions that are answered on SO, however the solutions did not work for me.
I'm using the StackNavigator. Here's my setup in my App.js file.
export default SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Categories: { screen: CategoriesScreen }, // send from here
Category: { screen: CategoryScreen } // to here
});
I have a TouchableHighlight component which has a onPress event that will navigate to the desired screen. This is on my Categories.js file/screen.
<TouchableHighlight onPress={(id) => {
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name}</Text>
</TouchableHighlight>
When I click the element, the screen does indeed switch to category, however it fails to send the props data.
So when I check the data in my Category screen, it returns undefined. I have tried the following methods:
this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category
How exactly can I access that data that I passed in
the navigate method?
navigate('Category', { category: id });
Edit: Here is my actual code structure:
The data comes from a API.
for (var i = 0; i < data.length; i++) {
var name = data[i].name;
var id = data[i].id;
categoryComponents.push(
<Card key={id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(id) => {
const { navigate } = this.props.navigation;
navigate('Category', { params: { category: id } });
}}>
<Text>{name + " " + id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}
240
React Navigation library is widely used with React Native to implement various types of navigation systems. With the React Navigation, we can also pass values or parameters between screens in React Native. We will create a simple stack navigator with 2 screens and will pass values from one screen to another screen.
To pass data when navigating programmatically with React Router, we can call navigate with an object. Then we can use the useLocation hook to return the object's data. const navigate = useNavigate(); navigate('/other-page', { state: { id: 7, color: 'green' } });
Your problem isn't sending the parameter. You are sending it right and reading it right. Your error is related to that your id is undefined.
You should fix your code like below,
for (var i = 0; i < data.length; i++) {
var name = data[i].name;
var id = data[i].id;
categoryComponents.push(
<Card key={id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(event) => {
// onPress event fires with an event object
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name + " " + id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}
And you can read your parameter like below.
this.props.navigation.state.params.category
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
