javascript - Navigate between different components React Native

Question

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.

question from:https://stackoverflow.com/questions/65943409/navigate-between-different-components-react-native

Answer 1

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;