How i can get the route param in react native

Viewed 9404

How i can get the route param in react native.

onPress={() => props.navigation.navigate('SingleTour', { item } )}
3 Answers

This is the way you can send the item eg index.js

<TouchableOpacity onPress={() => props.navigation.navigate('SingleTour', { item } )}>
    <Text>SingleTour</Text>
</TouchableOpacity>

in SingleTour.js you can get this item like this

const { item } = this.props.route.params;

I assume that you need to pass param with navigation and set param to the new screen's state.

Assuming that this is your onPress event on base screen

onPress={() => props.navigation.navigate('SingleTour', { item } )}

So this is how you set param in new screen's state

SingleTour.js

import React, { Component } from 'react';
import { 
  View,
  StyleSheet
} from 'react-native';

export default class SingleTour extends Component {

  constructor(props) {
    super(props);
    this.state = {
      item : this.props.navigation.state.params.item,
    }
  }

  render() {
    return (
      <View style={styles.container}>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

Hope you have clear about this :)

This is your solution.

        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}

If any problem occurs, you can refer to this Official Documentation Refer this Expo Snack Online Demo

Related