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.

You need to pass name/key you gave to second screen in navigate() method not Component. Like this this.props.navigation.navigate('Second'). — Ashu
– Ashu, Commented Jan 28, 2021 at 18:52

Guilherme Moretto · Accepted Answer · 2021-09-03 18:07:57Z

2

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

edited Sep 3, 2021 at 18:07

answered Jan 28, 2021 at 20:04

Guilherme Moretto

1031 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

velkoon Over a year ago

This is very hard for me to understand. Can you please label the filenames of each code snippet or create a functioning example at snack.expo.dev ?

Guilherme Moretto Over a year ago

@velkoon here it is, I made it as simple as possible: snack.expo.dev/@guilhermemoretto12/…

velkoon Over a year ago

Thank you that was nice of you. After asking many people for help online I eventually got it working after a very productive entire 8 hour work day that day

Collectives™ on Stack Overflow

Navigate between different components React Native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related