Lars Peterson Lars Peterson - 2 years ago 321
Javascript Question

React Native - Passing Data Across Screens

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>
);
}

Answer Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download