navigation.getParam is not a function - react-native

Question

I have a problem when getting value. It always returns me an error navigation.getParam is not a function.
Account.js
<TouchableOpacity onPress={() => this.props.navigation.navigate('Detail_Account',
{id:'hello'})}>
<Block style={ styles.content }></Block>
</TouchableOpacity>
in my Detail Account
const { navigation } = this.props;
const id = navigation.getParam('id', 'empty')
return(
<Block>
<Text>
{id}
</Text>
</Block>
);
Suggest any solution for this.

Answer 1

1) Go to your package.json file in your project.
2) Change the version of #react-navigation/stack to a 5.x.x.
Example:
"#react-navigation/stack": "^5.2.14",
3) Run npm install.
4) Edit your DetailAccount.js as follows.
import React from 'react';
import { StyleSheet, View, Alert } from 'react-native';
import { Block, Text } from 'galio-framework';
class DetailAccount extends React.Component {
constructor(props) {
super(props);
}
render() {
const id = this.props.route.params.id;
return (
<Block>
<Text>{id}</Text>
</Block>
);
}
}
export default DetailAccount;
5) Run npm start and restart your project.
You will fix the problem.

Answer 2

Try this solution
Account.js
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Detail_Account", { id: "hello" })
}
>
<Block style={styles.content}></Block>
</TouchableOpacity>;
Detail Account
const { id } = this.props.route.params;
return (
<Block>
<Text>{id}</Text>
</Block>
);

Answer 3

You can do like this...
const { navigation } = this.props;
const id = navigation.state.params.id;
return (
<Block>
<Text>{id}</Text>
</Block>
);
UPDATE
When configured the whole code of DetailAccount.js, the problem was, props are not received in to the particular component. So, the components doesn't know what this.props is.
Please update your DetailAccount.js as follows.
import React from 'react';
import { StyleSheet, View, Alert } from 'react-native';
import { Block, Text } from 'galio-framework';
class DetailAccount extends React.Component {
constructor(props) {
super(props);
}
render() {
const id = this.props.navigation.state.params.id;
return (
<Block>
<Text>{id}</Text>
</Block>
);
}
}
export default DetailAccount;
That means, simply you have to add the below part to your DetailAccount commponent.
constructor(props) {
super(props);
}