Navigate Between Screen: React Native

What is Stack Navigation ?

Stack Navigation allows you to navigate between screens in a last-in, first-out (LIFO) manner, similar to how a stack data structure works. Each screen is pushed onto the stack, and navigating back removes the top screen.

Setting Up React Navigation

At first you have to install react-native-stack on your project by running command within your project folder.

npm install @react-navigation/native @react-navigation/native-stack

After that you have to add dependencies on your project. This depends on your project like Expo managed project or a bare React Native project.

• If your project is Expo managed project then run.

    npx expo install react-native-screens react-native-safe-area-context
  

• If your project is bare React Native project then run.

    npm install react-native-screens react-native-safe-area-context
  

  For iOS with bare React Native project you have to install CocoaPods.

  Then install pods.

    cd ios
    pod install
    cd ..
  

Project Structure

Here is the code structure looks like.

App.js : Where you have to Initialize the stack and keep all the Components within NavigationContainer. Here's an example:

import React from "react";
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Screen1 from './Components/Screen1' //path to screen1
import Screen2 from './Components/Screen2' //path to screen2
import Home from "./Components/Home";      //path to Home
const Stack = createNativeStackNavigator(); 
export default function App() {
 return (
<NavigationContainer>
      <Stack.Navigator initialRouteName="Home"> 
        <Stack.Screen name="Home"component={Home}options={{title: 'Welcome'}}/> 
        <Stack.Screen name="Screen1"  component={Screen1} />
        <Stack.Screen name="Screen2"  component={Screen2}/>
      </Stack.Navigator>
</NavigationContainer>
  );
}

Home.js: As specified in the App.js within the Stack.Navigator, the application will display the Home component initially because of the initialRouteName setting. useNavigation hook is from @react-navigation/native and provides access to the navigation object, enabling easy navigation between screens.

import { View, Text, Button } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";

export default function Home() {

  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: "center" }}>

      <Text >This is Home</Text>

      <View style={{ margin: 20 }}>
        <Button
          onPress={() => navigation.navigate("Screen1") }
          title="Go to Screen1"
          color="#841584"
        />
      </View>

      <View style={{ margin: 20 }}>
        <Button
          onPress={() => navigation.navigate("Screen2")}
          title="Go to Screen2"
          color="#841584"
        />
      </View>

    </View>
  );
}

Screen1.js:

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

export default function Screen1() {
  return (
    <View>
      <Text>Screen1</Text>
    </View>
  )
}

Screen2.js:

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

export default function Screen2() {
  return (
    <View>
      <Text>Screen2</Text>
    </View>
  )
}

By following this guide, you should now have a solid foundation to build upon, creating dynamic and navigable React Native applications.