How to Pass Parameters to screen in StackNavigator?

My React Native code:

import React, { Component } from 'react';
import { AppRegistry, ActivityIndicator, StyleSheet, ListView, 
  Text, Button, TouchableHighlight, View } from 'react-native';

import { StackNavigator } from 'react-navigation';
import DetailsPage from './src/screens/DetailsPage';

class HomeScreen extends React.Component {
  
   constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      userDataSource: ds,
    };
  }

  componentDidMount(){
	  this.fetchUsers();
  }
  
	fetchUsers(){
		
		fetch('https://jsonplaceholder.typicode.com/users')
			.then((response) => response.json())
			.then((response) => {
				this.setState({
					userDataSource: this.state.userDataSource.cloneWithRows(response)
				});
			});
	}
	
	onPress(user){
		this.props.navigator.push({
			id: 'DetailPage'
		});
	}
  
  renderRow(user, sectionID, rowID, highlightRow){
	  return(
	  <TouchableHighlight onPress={()=>{this.onPress(user)} } >
	  <View style={styles.row}>
		<Text style={styles.rowText}> {user.name} </Text>
	  
	  </View>
	  </TouchableHighlight>
	  )
  }
  
  
  render(){
	  return(
		  <ListView
			dataSource = {this.state.userDataSource}
			renderRow = {this.renderRow.bind(this)}
		  />
	  )
  } 
}

Navigation config:

const NavigationTest = StackNavigator({
  Home: { screen: HomeScreen },
  DetailsPage: { screen: DetailsPage },
});

The Details screens is:

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

import styles from '../styles';


export default class DetailsPage extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `User: ${navigation.state.params.user.name}`,
  });
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text style={styles.myStyle}>Name: {params.name}</Text>
        <Text style={styles.myStyle}>Email: {params.email}</Text>
      </View>
    );
  }
}

I am not able to pass the user to the DetailsPage with the code:

onPress(user){
        this.props.navigator.push({
            id: 'DetailPage'
        });
    }

I want to navigate to the DetailPage with the onPress function. If I alert it like:

onPress(user){ Alert.alert(user.name)}

I do get the value, but how do I pass it to the other page?

Many thanks!

You can pass params with the navigate function's second argument:

onPress(user) {
  this.props.navigation.navigate(
    'DetailPage',
    { user },
  );
}

React Navigation 5.x (2020)

Access them in this.props.route.params. For example in your DetailsPage:

<Text style={styles.myStyle}>{this.props.route.params.user.name}</Text>

https://reactnavigation.org/docs/params/

React Navigation <= 4.x

Access them in this.props.navigation.state.params. For example in your DetailsPage:

<Text style={styles.myStyle}>{this.props.navigation.state.params.user.name}</Text>

https://reactnavigation.org/docs/4.x/params/

In react hooks, params send in navigation using useNavigation

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

<Button
      title="Back"
      onPress={() => {
        navigation.navigate('MyScreen',{name:'test'});
      }}
    />

then access them using useNavigationParam

function MyScreen() {
  const name = useNavigationParam('name');
  return <p>name is {name}</p>;
}

See this .

It solved my problem.

this.props.navigation.navigate("**stack_Name**", {
 screen:"screen_name_connect_with_**stack_name**",
 params:{
 user:"anything_string_or_object"
}
})

In your first page, say CountriesList

const CountriesList = ({ navigation }) => {

/* Function to navigate to 2nd screen */
  const viewCountry = (country) => {
    navigation.navigate('ListItemPageRoute', { name: country.country_name });
  };
}

For your second page name, say ListItemPageRoute

const ListItemPageRoute = (props) => {

return (
    <View style={styles.container}>
        <Text style={styles.countryText}> { props.route.params.name } </Text>
    </View>
  );
};

'Props.route' Object will have the list of all parameters you would like to pass from one screen to another.

for me, soved it by useNavigation() and useRoute():

For functional component:

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

For class component:

class MyText extends React.Component {
  render() {
    // Get it from props
    const { route } = this.props;
  }
}

// Wrap and export
export default function(props) {
  const route = useRoute();

  return <MyText {...props} route={route} />;
}

onPress={() => {this.props.navigation.navigate('AllImages', {Types: item.type })} console.log('valuesstrong text', this.props.route.params.Types);**

1)How to send data to another screen through params : onPress={(item) => props.navigation.navigate('Your ScreenName', {item : item})}

2)How to get data on another screen: const {item} = props.route.params

You can do it so easily.
You want to pass some parameters to your screen ? Do just that:

export default () => {
  
  const MainScreenComponent = ({navigation}) => (
    <MainScreen
      navigation={navigation}
      /**
      *
      * And here your parameters...
      *
      */
    />
  );

  const HomeScreenComponent = ({navigation}) => (
    <HomeScreen
      navigation={navigation}
      /**
      *
      * And here your parameters...
      *
      */
    />
  );

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="MainScreen">
        <Stack.Screen name="MainScreen" component={MainScreenComponent}/>
        <Stack.Screen name="HomeScreen" component={MomeScreenComponent}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
};