CODEWITHSUNDEEP
react-nativestack-navigator
Mayuresh Patil
Mayuresh Patil

Reputation: 2200

How to display data in 2nd screen passed from 1st screen to 2nd

I am passing data from one screen to another screen on press button. I have problem with displaying data in that another screen...

following is my code:

home.js

  goPressed(shareproductid){    
     this.props.navigation.navigate(
      'Products',
      shareproductid,
      console.log(shareproductid)
    );
  }


  <TouchableHighlight onPress={() => this.goPressed(item.p1.shareproductid)} style={styles.button}>
    <Text style={styles.buttonText}>
      Go
    </Text>
  </TouchableHighlight>

Products.js

import React, { Component } from "react";
  import { View, Text } from "react-native";

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

    render() {
      return (
              const { params } = this.props.navigation.state;

        <View>
          <Text>{this.params.shareproductid}</Text>

        </View>
      );
    }
  }

In this Products.js i have to display shareproductid so how can i display it please help...

Upvotes: 0

Views: 103

Answers (1)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

The passed params needs to be an object:

goPressed(shareproductid) {
  const { navigate } = this.props.navigation;
  const params = { shareproductid };

  navigate('Products', params);
}

And capture them in Products.js like this:

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

  return (
    <View>
      <Text>{ params.shareproductid }</Text>
    </View>
  );
}

Upvotes: 1

Related Questions