React Native – Stack Navigation

Step 1

npm install @react-navigation/native 

Step 2

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view 

If you’re on a Mac and are building for iOS, you need to install the pods to complete the connection (via Cocoapods).

npx pod-install ios 

Wrap the entire app in NavigationContainer in your entry file like App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
} 
npm install @react-navigation/stack 
// In App.js in a new project

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Home Screen"
        onPress={() => navigation.navigate('Second')}
      />
    </View>
  );
}

function SecondScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Second Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Second" component={SecondScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App; 

Output

In this example we will navigate between different .js files

These .js files are kept in /src folder

// App.js

import React, {Component} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Dialphones from './src/Dialphone';
import Splashscreen from './src/Splashscreen';

const Stack = createStackNavigator();

function App() {
  return (
  <NavigationContainer>
   <Stack.Navigator>
        <Stack.Screen name="Splash" component={Splashscreen} />
        <Stack.Screen name="Dial" component={Dialphones} />
   </Stack.Navigator>
  </NavigationContainer>
  );
}

export default App; 
// Splashscreen.js

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

export default class Splashscreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Splashscreen</Text>
          <Button
          title="Go to DialPhone"
          onPress={() => this.props.navigation.navigate('Dial')} />
      </View>
    )
  }
} 
// Dialphone.js

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

export default class Dialphone extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Dial Phone</Text>
        <Button
          title="Go to  Splashscreen"
          onPress={() => this.props.navigation.navigate('Splash')} />
      </View>
    )
  }
}