I want to pass the parameter from one screen to another screen but it won't be working.

I have tried the one way as per the documentation but giving me an error & unable to resolve it.

I am mentioning my code below, I can't able to address the actual issue in it & it is giving me an error as TypeError: onPress is not a function. (In 'onPress(event)', 'onPress' is an instance of Object) on Screen2.js file on line {this.props.navigation.state.params.Name}

//App.js File

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './Screens/Screen1';
import DetailsScreen from './Screens/Screen2';

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Screen1"
          component={HomeScreen}
          options={{ title: 'Welcome' }}
        />
        <Stack.Screen name="Screen2" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
export default MyStack;


//Screen1.js Code here

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

class Screen1 extends Component{
    constructor(props){
        super(props),
        this.state={
            username :'',
        }
    }
  render(){
    return(
        <View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
          <Text style={{fontSize:20}}>Login Page</Text>
          <TextInput placeholder={"Please Enter Your Name"} onChangeText={(username)=>this.setState({username})} />
          <Button title={"Login"} onPress = {()=> this.props.navigation.navigate('Screen2'), { Name: this.state.username }} />
        </View>
    )
  }
}
export default Screen1;


//Screen2.js Code here
import React, { Component } from "react";
import { View, Text } from "react-native";

class Screen2 extends Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <Text>
                    Welcome {this.props.navigation.state.params.Name}
                </Text>
            </View>
        )
    }
}
export default Screen2;

CodePudding user response：

Here is your error:

<Button title={"Login"} onPress = {()=> this.props.navigation.navigate('Screen2'), { Name: this.state.username }} />

You aren't passing two args to navigate, you're passing two diferente things.

Replace the line above for:

<Button title={"Login"} onPress = {()=> this.props.navigation.navigate('Screen2', { Name: this.state.username })} />

Another error is:

<Text>Welcome {this.props.navigation.state.params.Name}</Text>

React Navigation has another param called route. You can access it like: const { Name } = this.props.route.params;

or

<Text>Welcome {this.props.route.params.Name}</Text>