React-Navigation :  Navigate with Stack
Tags: react, reactnative, javascript
Published: 2021-12-30 17:32:37

### React-Navigation
>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.

A Single screen mobile application is uncommon. For managing multiple screens and their behaviour, react-native provides React-Navigation library.

In this series of articles,  I will try to explain about various navigation options.
1. Stack Navigation
1. Tab Navigation
1. Drawer Navigation


#### Installation
 *  For Installation please follow this [documentation](https://reactnavigation.org/docs/getting-started). I have provided the link for RN6.0. In the end of the series we will discus about the major changes in RN6.0.

Enough talking,  let's  get stared.

![lets-get-started-shall-we-riffs-beards-gear.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1640859404210/ys_iIpl0r.gif)

### Stack Navigation

This part will cover how to move from one screen to another, how to pass data, and different customisation options.

I hope you have followed the installation process for the react-navigation library. 

First we have to wrap our app with `NavigationContainer`. We need to wrap the whole app in NavigationContainer. Usually you'd do this in your entry file, such as `index.js` or `App.js`

**NavigationContainer** 
- The NavigationContainer is responsible for managing your app state and linking your top-level navigator to the app environment. 
- It takes care of platform specific navigation and provides useful property for  customisation.
- Handling the back button by using `BackHandler` API in Android Application from react-native
- Managing deep linking.


![carbon (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640860597549/-brchSuxo.png)

Let's have a look at the above code snippet.

- **createNativeStackNavigator**:  is a function that returns an object containing 2 properties: `Screen` and `Navigator`

- **Stack.Navigator**:  is a component that takes route configuration as its children with additional props for configuration and renders our content.

- **Stack.Screen**:  The `Screen` component accepts a `name` prop which corresponds to the name of the route we will use to navigate and a `component` prop which corresponds to the component it'll render. In aforementioned code the `NewsFeed` route corresponds to the `NewsFeedScreen` component.

- **initialRouteName**:  We can define the initial route by using the `initialRouteName` prop. In this example, we're using the `Login` route.

#### Navigate from one screen to another Screen



![carbon (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640860750395/vierj7Z0A.png)


-  `navigation` is a prop that is passed to the component in the native stack navigator. If you're wondering what functions are used to dispatch navigation actions, you've come to the right place. Let's keep track of them.

![carbon (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640860811596/DlUyvvzS4.png)
 

- `navigate()` is a function that pushes a new route to the native stack navigator if it's not already in the stack, otherwise it jumps to that screen.
- `goBack()` is a function that we can use to navigate back to previous screen.
- `push()`  action adds a route on top of the stack and navigates forward to it.

 For more details about `navigation` follow this [document](https://reactnavigation.org/docs/navigation-prop/)


#### Passing the data from one screen to another
We can  pass the data to the route by putting them in an object as second parameter to the navigate function.



![carbon (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640860900322/zkD0JzzWy.png)


For getting the parameter to second screen we can use the `route.params`

#### Passing the data to previous screen
For sending the data back to previous screen. We can use `navigate` function and pass the data.

![carbon (6).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640860949477/C2PCZ36RC.png)


And getting it to the parent screen, we can use React `useEffect` hook. I have added an article  for [useEffect](https://dev.to/iamrajshekhar/useeffect-is-it-really-effective-4e3l)

![carbon (8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640883291306/d77bwXX-Mk.png)


#### Going Back

The header provided by the native stack navigator automatically contains the back functionality. There are few methods by which you can trigger back functionality manually.
- `navigation.goBack()`
- `navigation.popToTop()'  function will take you back to the first screen.
- `navigation.navigate('Route')` can also be used for navigating  back to any specific screen.


#### Customisation of  the header

 We can customise header by using the `options` prop. Below are the properties which can be used for customising header.

![carbon (7).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640860988512/mrt2cETnI.png)

 - `headerStyle` :Style object for the header.
 - `headerTitle` : Title for the header.
 - `headerTitleStyle` :Style object for the title of the header.
 - `headerTintColor` : Color of the header.
 - `headerBackTitle` :Title for the back button.
 -  `headerBackTitleVisible`:  Visibility of the back button.

There are many more, please refer this [document](https://reactnavigation.org/docs/headers) 


### Summary
- `NavigationContainer`  is the root component of the app.
- `navigation.navigate('RouteName')` pushes a new route to the native stack navigator if it's not already in the stack, otherwise it jumps to that screen.
- `navigation.push('RouteName')` will add a new  screen onto the stack . It does not check if the screen is already on the stack. Push will always add on top, so a route can be present multiple times.
- You can read the params through `route.params` inside a screen
- You can update the screen's params with `navigation.setParams`
- `popToTop()` pops all the screens off the stack and go back to the login screen.
- `replace`  allows to replace a route in the navigation state.






![stack_nav.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1640858634639/ZE4_xHqwU.gif)





### Related Links

1.  [How to install](https://reactnavigation.org/docs/getting-started)  
1.  [Upgrading From v5.x](https://reactnavigation.org/docs/upgrading-from-5.x/) 
1.  [React-Navigation](https://reactnavigation.org/docs/hello-react-navigation)


{% github https://github.com/iamrajshekhar/react-navigation-sample no-readme %}

Thank you so much for reading this article! Happy coding!

Please feel  free to make suggestions or corrections. Let's connect on [Twitter](https://twitter.com/yrajshekhar231).


![the-office-bow.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1640859293784/64QiMsTWN.gif)