CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Mayuresh Patil
Mayuresh Patil

Reputation: 2200

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

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

Upvotes: 1

Views: 7478

Answers (2)

Firdiansyah Ramadhan
Firdiansyah Ramadhan

Reputation: 83

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

Upvotes: 1

Teedub
Teedub

Reputation: 382

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

Upvotes: 0

Related Questions