Skip to content
Advertisement

Navigate between different components React Native

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

Advertisement