How to Pass Parameters to screen in StackNavigator?

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