Navigate Between Stack Screens using imported button

I am new to react native and am having trouble establishing connections between components.

For example onClickFunction() {this.props.navigation.navigate('CurrencyList')} is not working for my pattern. I did a several research on this subject but I could not understand its logic.

This is my App.js

import React from 'react' import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack';  // Screens---------------------------------------------------------   // Auth Screens  import Login from './screens/Authentication/Login' import Register from './screens/Authentication/Register'   // Main Screens import Home from './screens/Home' import Converter from './screens/Converter' import CurrencyList from './screens/CurrencyList'  //-----------------------------------------------------------------  const Stack = createStackNavigator();  var routeName = 'Converter';    export default class App extends React.Component {   render() {     return (       <NavigationContainer>         <Stack.Navigator initialRouteName={`${routeName}`}>           <Stack.Screen name="Home" component={Home} />           <Stack.Screen name="Login" component={Login} />           <Stack.Screen name="Register" component={Register} />           <Stack.Screen name="Converter" component={Converter} />           <Stack.Screen name="CurrencyList" component={CurrencyList} />         </Stack.Navigator>       </NavigationContainer>     )   } } 

This my Converter Page

// Currency Converter Page  import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native';  // Components  import UpdateButton from '../../components/UpdateButton' import CurrencySelectButton from '../../components/CurrencySelectButton' import CurrencyTextInput from '../../components/CurrencyTextInput' import ConvertedCurrencyTextInput from '../../components/ConvertedCurrencyTextInput'  export default function Home() {   return (     <View style={styles.container}>              <View style={styles.textHolder}>       <CurrencyTextInput />       <Text>=</Text>       <ConvertedCurrencyTextInput />       </View>        <View style={styles.buttonHolder}>       <CurrencySelectButton />       <Text>to</Text>       <UpdateButton />              </View>                          </View>   ); }  const styles = StyleSheet.create({   container: {     flex: 1,     flexDirection: 'column',     backgroundColor: '#fff',     alignItems: 'center',     justifyContent: 'center',   },   buttonHolder: {     flexDirection: 'row',     alignItems: 'center',     justifyContent: 'center',     backgroundColor: '#f1f1f1',     alignContent: 'center'        },   textHolder:{     flexDirection: 'row',     alignItems: 'center',     justifyContent: 'center',     backgroundColor: '#f1f1f1',     alignContent: 'center'   } });  

This is the button component that I want to change the screen

import React from 'react' import { TouchableOpacity, Text, StyleSheet } from 'react-native'    export default class CurrencySelectButton extends React.Component {       onClickFunction() {         this.props.navigation.navigate('CurrencyList')       }      render() {         return (                          <TouchableOpacity onPress={() => this.onClickFunction()} style={styles.button} >                 <Text style={styles.buttonText} >TRY</Text>             </TouchableOpacity>         )     } }   const styles = StyleSheet.create({     button: {         backgroundColor: 'black',         padding: 15,         justifyContent: 'center',         alignItems: 'center',         borderRadius: 15,         flex: 1,         height: 75,         marginHorizontal:20     },      buttonText: {         color: 'white',         fontWeight: 'bold',         fontSize: 17     }  })