How to send data from one screen to another screen in react native?

Question

I am new to react native how can i send data from one screen to another screen using props in android not for ios my code is as below

Home.js

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      qwerty:{
        data:[],
      },
    };
  }

  goPressed(navigate){
     navigate("Product");
  }

  render() {
      const { navigate } = this.props.navigation;

      contents = this.state.qwerty.data.map((item) => {
        return (
            <View key={item.p1.id}>
            <View>
              <Text>{item.p1.content}</Text>
            </View>
            <View>

            <TouchableHighlight onPress={() => this.goPressed(navigate)}>
              <Text>
                Go
              </Text>
            </TouchableHighlight>

            </View>
          </View>
          );
       });

      return (
        <ScrollView style={styles.container}>
          {contents}
        </ScrollView>
      );
    }
  }

  export default Home;

this is my home.js , I want pass data i.e {item.p1.content} to another screen i.e product.js so how can i do it what modification should i do?

Product.js

      export default class Products extends Component {
  static navigationOptions = {
    title: "Products",
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text>{item.p1.content}</Text>
      </View>
    );
  }
}

Trenton McKinney · Accepted Answer · 2019-10-06 00:58:45Z

1

Send data to other screen

this.props.navigation.navigate('Your Screen Name' , { YourParamsName: "Foo"});

Receive data from other screen

this.props.navigation.state.params.YourParamsName

edited Oct 6, 2019 at 0:58

Trenton McKinney

63.2k41 gold badges170 silver badges213 bronze badges

answered Oct 6, 2019 at 0:30

Firdiansyah Ramadhan

831 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Teedub · Accepted Answer · 2017-09-28 19:53:33Z

0

One method is to simply pass the date you are storing in 'qwerty' as a props to the next scene.

In Home.js you can modify your goPressed method to be something like...

  goPressed(navigate){
     navigate("Product", {passedData: this.state.qwerty.item.p1.content});
  }

Then in Product.js you will need to modify the code to

render() {
    return (
      <View style={{ flex: 1 }}>
        <Text>{this.props.passedData}</Text>
      </View>
    );
  }

answered Sep 28, 2017 at 19:53

Teedub

3821 silver badge7 bronze badges

2 Comments

Mayuresh Patil Over a year ago

hello.. using this method it is navigating but data is not passed to Product & showing undefined when cheked on console. Is any need to import something or set state in Product.js.

Teedub Over a year ago

what do you get when you change Home.js to: navigate("Product", {passedData: this.state.qwerty});

Collectives™ on Stack Overflow

How to send data from one screen to another screen in react native?

2 Answers 2

Send data to other screen

Receive data from other screen

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Send data to other screen

Receive data from other screen

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related