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>

    );

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

React Native - Passing Data Across Screens

Sign up