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 } })
You will have to pass the navigation prop from home to the button like below
export default function Home({navigation}) { return ( <View style={styles.container}> <View style={styles.textHolder}> <CurrencyTextInput /> <Text>=</Text> <ConvertedCurrencyTextInput navigation={navigation}/> </View> <View style={styles.buttonHolder}> <CurrencySelectButton /> <Text>to</Text> <UpdateButton /> </View> </View> ); }