So I’ve been trying to understand how to do this for like 2 hours now but I can’t seem to figure it out. I want to be able to go from one component to another when the button is clicked.
First.js
import React, {useState} from 'react'; import { StyleSheet, StatusBar, SafeAreaView, View, Text } from 'react-native'; import {Button} from 'react-native-elements'; import { Second } from './Second.js'; export class Information extends React.Component { render() { return ( <SafeAreaView style={styles.container}> <View style={styles.footer}> <View style={styles.footerBtn}> <Button titleStyle={{ fontSize: 16, }} buttonStyle={{ backgroundColor: '#007AFF' }} raised={true} title="Continue" onPress={() => { this.props.navigation.navigate(Second) }} color="#007AFF" /> </View> </View> </SafeAreaView> ); } }
Second.js
import React from 'react'; import { StyleSheet, StatusBar, SafeAreaView, Dimensions, View, Text } from 'react-native'; export class Postcode extends React.Component { render() { return ( <SafeAreaView style={styles.container}> <StatusBar /> <Text> Wow this is a cool second page</Text> </SafeAreaView> ); } }
So I cut out some of my code with all the extra stuff but above is the two basic files. They’re both in the same folder and when I click the button I want to be able to go from first page to second page. I feel like I’m dumb and the answer is really obvious but I just can’t figure it out.
Advertisement
Answer
I think the best way to do this would be using Stack Navigation, like in this example of a project that I have:
the stack component:
import React from 'react'; import Home from '../pages/Home'; import Sales from '../pages/Sales'; import NewSale from '../pages/Sales/NewSale'; import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator(); function Stacks() { return ( <Stack.Navigator> <Stack.Screen name='Home' component={Home} options={{ headerShown: false }} /> <Stack.Screen name='Negociação' component={Sales} /> <Stack.Screen name='Nova Negociação' component={NewSale} /> </Stack.Navigator> ); } export default Stacks;
Where I click the button to navigate:
import React from 'react'; import * as S from './styles'; export default function Sales({ navigation }) { return ( <S.Container> <S.Add onPress={() => navigation.navigate('Nova Negociação')}> </S.Add> </S.Container> ) }
The app.tsx
or app.js
import 'react-native-gesture-handler'; import { NavigationContainer } from '@react-navigation/native'; import React from 'react'; import { StatusBar } from 'react-native'; import styles from './styles/styles'; import Stacks from './stackNav'; const App: React.FC = () => ( <NavigationContainer> <StatusBar barStyle="light-content" backgroundColor={styles.primaryColor} /> <Stacks /> </NavigationContainer> ); export default App;
Edit: Check this expo snack: https://snack.expo.dev/@guilhermemoretto12/react-native-stack-navigator-example