The Ins and Outs of React Native Stack Navigation

What is Stack Navigation?

React Native Stack Navigation is a navigation system that allows you to navigate between screens in a stack. The stack navigation system is built on top of the React Navigation library and provides a simple and efficient way to manage navigation in your React Native app.

Why use React Stack Navigation?

There are several reasons why you might want to use React Stack Navigation in your app.

Firstly, it provides a simple and intuitive way for users to navigate through your app. Users can easily go back to previous screens, and they can see a clear visual representation of where they are in the app.

Secondly, React Stack Navigation is highly customizable. You can easily customize the look and feel of your navigation bar, as well as the animations that are used when screens transition. This can help you create a unique and engaging user experience.

Finally, React Stack Navigation is well-documented and well-supported. The library has a large community of developers who contribute to its development and maintenance. This means that you can easily find answers to any questions you may have, and you can be confident that the library will continue to be updated and improved over time.

How to use React Stack Navigation?

Using React Stack Navigation is relatively simple. Here are the basic steps:

First Step: — Installation

You can do this using npm or yarn

Let me show you the screenshot of my Terminal here:

Open the Terminal of the project Directory:

for npm : paste “npm install @react-navigation/stack”

For yarn : paste “yarn add @react-navigation/stack”

Let it install for sometimes,

Other Packages you need to install:-

React Natigation/Stack can’t work without having some other package installed in your project.

What are the other Packages?

  • React Navigation/native : Inside your project Terminal

npm install @react-navigation/native

OR

yarn add @react-navigation/native

  • Gesture Handler

npm install react-native-gesture-handler

OR

yarn add react-native-gesture-handler

Once the installation is complete, go to your package.json to confirm your installation.

Package.json

Make sure you have , “@react-navigation/native”, “@react-navigation/stack”, and”react-native-gesture-handler” inside your package.json.

Once your done with the confirmation:

Inside your project folder,

Create a folder with name “route” and create a new file called stack.js inside “route” folder

Make sure you have some components your want to render to the screen

Stacks.js

<Stack.Screen name=’todos’ component={TodoList} />

Will be your first screen when you run your app , it serve as index.html in web. so you have to paste your index screen above all code in your Stack.group tag.

Look for app.js in your project Folder,

Paste this code to your app.js

app.js

Programmatically Navigation:-

Inside any of you component:

import { useNavigation } from ‘@react-navigation/native’;

let me show you an example of my code

onbordingscreen

navigation.navigate(“todos”); the “todos” is the key to the screen the navigation will be going.

how can you pass data to screen

useEffect(() =>{

setTimeout(() => {

navigation.navigate(“todos”,{name:”Code with Shenet”,Id:Math.random()});}, 1000);},

[]);

how to get the data

inside the component you want to get the data . access it like you want to access normal react Props

component to get the data

Conclusion

React Stack Navigation is a powerful tool for navigating through your app. It provides a simple and intuitive way for users to move between screens, and it is highly customizable. If you’re building a React Native app, React Stack Navigation is definitely worth considering. It can help you create a great user experience and make your app more successful.

I am Fullstack Software Developer

Youtube channel: @code_with_sheynet351

Thanks