React Native - Passing Data Across Screens

Question

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

score 5 · Accepted Answer · answered Oct 02 '17 at 14:11

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

Much thanks! I've been stuck on this fire awhile. Was I overriding the `id` variable because I made it a parameter? — Lars Peterson, Oct 02 '17 at 14:15
Yes you were overriding parameters so the id you were trying to pass was not actually the id you created in your for loop. — bennygenel, Oct 02 '17 at 14:17

score 0 · Answer 2 · edited Oct 02 '17 at 14:04

0

From parent screen:

navigate({ routeName: 'Category',  params: { category: id } })

or

navigate('Category', { category: id })

From child screen:

const category = this.props.navigation.state.params.category

edited Oct 02 '17 at 14:04

bennygenel

23,896
6
65
78

answered Oct 02 '17 at 13:58

Alexander Vitanov

4,074
2
19
22

I just tried this, however it still seems to be returning `undefined`. – Lars Peterson Oct 02 '17 at 14:00
Where does your id come from in {...? – Alexander Vitanov Oct 02 '17 at 14:01
This is wrong I'm afraid. Parameter passing is wrong. – bennygenel Oct 02 '17 at 14:02
You were missing a parenthesis. I edited the answer. – bennygenel Oct 02 '17 at 14:06
The updated answer seems to be worse. The page does not navigate or send the data. Nothing happens. – Lars Peterson Oct 02 '17 at 14:09
Are you using Redux? – Alexander Vitanov Oct 02 '17 at 14:11

score 0 · Answer 3 · answered Oct 02 '17 at 14:12

0

So looking at the above described issue I think you are looking for something like screenProps (documented here).

This allows you to pass a specific props across screens.

I hope this helps. Please let me know if you need anything else.

answered Oct 02 '17 at 14:12

Apurva jain

1,460
13
14

score 0 · Answer 4 · answered Mar 26 '19 at 13:13

0

Using the following code snippet, you can navigate to another screen with some values.

navigate({ Home: 'HomeScreen',  params: { username: 'abcd' } })

and you can collect the parameter at HomeScreen using,

this.props.navigation.state.params.username

answered Mar 26 '19 at 13:13

Codemaker2015

12,190
6
97
81

React Native - Passing Data Across Screens

4 Answers4

Linked