How to pass parameter using react-navigation in React Native?

Question

I want to pass parameter(image URL in local) to the next screen. For example, in the products list screen, when I click one product, it navigates to the product detail page with that product image as well as it's all information. So I passed that product information as "item", but only image URL is not working. When I receive that parameter in product detail screen, it gave me strange result. What is the error and solution? How to pass image URL to the next screen? That is my code.

Product page

export default class Merchandise extends Component {
  constructor(props) {
    super(props);
    this.state = {
      merchandise: [
        { id: 1, img: require('../assets/images/img1.png'), title: 'shirt', price: 20 },
        { id: 2, img: require('../assets/images/img2.png'), title: 'trousers', price: 50 },
        { id: 3, img: require('../assets/images/img3.png'), title: 'skirt', price: 30 },
        { id: 4, img: require('../assets/images/img4.png'), title: 'shoes', price: 56 },
        { id: 5, img: require('../assets/images/img5.png'), title: 'clothes', price: 856 },
      ],
    };
  }

  onPressPhoto = (item) => {
    this.props.navigation.navigate('MerchandiseDetail', { merchandiseInfo: item });
  };
  renderPhotos = ({ item }) => (
    <TouchableOpacity onPress={() => this.onPressPhoto(item)}>
      <Image source={item.img} resizeMode="cover" />  //-->It is working well here, but next screen
    </TouchableOpacity>
  );

  render() {
    return (
      <View style={styles.main}>
        <Card>
          <FlatList
            data={this.state.merchandise}
            renderItem={this.renderPhotos}
            keyExtractor={item => item.id}
          />
        </Card>
      </View>
    );
  }
}

Product Detail page

export default class MerchandiseDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  componentDidMount() {
    const itemDetail = this.props.navigation.getParam('merchandiseInfo')
    console.log('itemDetail', itemDetail);    // --> This is log:    itemDetail {"id": 2, "img": 16, "price": 50, "title": "trousers"}
  }                                           // "img" is wrong
  render() {
    return (
      <View style={styles.main}>
        <Card>
          <View>
            <Image source={item.img} resizeMode="cover" />  // --> This must be "require('../assets/images/img2.png')"  But wrong now.
          </View>
        </Card>
      </View>
    );
  }
}

bas · Accepted Answer · 2020-09-08 21:06:56Z

I would approach this problem differently. Instead of passing the image on navigate you can make merchandise accessible to both components:

export const merchandise = [
  {
    id: 1,
    title: 'shirt',
    price: 20,
    img: require('../assets/images/img1.png'),
  },
  // etc...
];

Then you can import {merchandise} from 'path' in both component files.

Then inside onPressPhoto you can pass the id of the item on navigate instead of the entire item. So you can do something like this:

this.props.navigation.navigate('MerchandiseDetail', { merchandiseInfoId: item.id });

Inside the product detail page component you can filter merchandise and get the img where the item has an id equal to the id passed on navigate.

<Image
  source={
    merchandise.filter(
      (item) => item.id === this.props.navigation.getParam('merchandiseInfoId'),
    )[0].img
  }
/>

Collectives™ on Stack Overflow

How to pass parameter using react-navigation in React Native?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related