react native navigation error "navigate is undefined" - react-native

Question

I am creating a react native application and I have problem when I want to navigate between screens it gives error as " Cannot read property 'navigate' of Undefined " . I want when I press gear icon it must navigate to settings part . I couldn't clearly see where did I mistake .
settings button touchable opacity
import React from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer} from 'react-navigation';
import PS from '../screens/PS';
import SPC from '../screens/SPC';
import TFA from '../screens/2FA';
import Login from '../screens/Login';
import Settings from '../screens/settings';
const screens = {
Login: {
screen: Login,
navigationOptions: {
header: null,
}
},
TFA:{
screen: TFA
},
PS: {
screen: PS,
navigationOptions: {
header: null,
}
},
SPC: {
screen: SPC
},
Settings: {
screen: Settings
}
}
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);
import React, {useState}from 'react';
import SettingsButton from './SettingsButton';
import ConnectionIcon from './Connectionİcon';
import { View, Image, StyleSheet } from 'react-native';
const Header = () => {
return (
<View style={styles.header}>
<View style={styles.headerp1}></View>
<View style={styles.headerp2}><Image
source={require('../assets/images/monitor.png')}
/></View>
<View style={styles.headerp3}>
<SettingsButton />
<ConnectionIcon />
</View>
</View>
)
}
export default Header;
// const styles here
import React from 'react';
import { Image, TouchableOpacity, StyleSheet } from 'react-native';
const SettingsButton = ({ navigation }) => {
return (
<TouchableOpacity
style={styles.headerp3v2}
onPress={() => navigation.navigate('Settings')}
>
<Image style={styles.reddot}
source={require('../assets/images/gear.png')}
/>
</TouchableOpacity>
)
}
export default SettingsButton;
// const stlyes codes here
header file is here
import { Image, StyleSheet, Button, View, Text, SafeAreaView, StatusBar } from 'react-native';
import Footer from '../components/Footer';
import Header from '../components/Header';
import PV from '../components/PV';
export default function PS() {
return (
<View style={styles.container}>
<StatusBar hidden />
<Header />
<View><Text style={styles.text}>All Persons</Text></View>
<PV />
<Footer/>
</View>
);
}```

Answer 1

You don't pass navigation prop into SettingsButton
You can try use useNavigation hook https://reactnavigation.org/docs/use-navigation/ for get navigation object into SettingsButton
import React from 'react';
import { Image, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '#react-navigation/native'; // <-- new code
const SettingsButton = () => {
const navigation = useNavigation(); // <-- new code
return (
<TouchableOpacity
style={styles.headerp3v2}
onPress={() => navigation.navigate('Settings')}
>
<Image style={styles.reddot}
source={require('../assets/images/gear.png')}
/>
</TouchableOpacity>
)
}
export default SettingsButton;