React (Native) Navigation
Tags: reactnative, reactnavigation, summary, beginners
Published: 2022-07-27 03:28:00

## Introduction

Programming can be disturbing sometimes as you are required to remember a lot of concepts in one project especially if you are just beginning. 

An approach I like to use to save myself stress is to just know and understand what am supposed to do, then I care about how to do it later. As you can guess google and cheat sheets have been fundamental to my development.

When I was learning react navigation from the documentation, I thought it wise to save the summaries of each important section for my personal reference so I do not have to run to the documentation every time I had forgotten something. Now I have decided to share with anyone out there that may need such a summary

> This is not a how to and you are expected to know what you are doing but just looking to remind yourself, it is just a summary of the basic components and settings you need setting up react navigation in your app. If you are totally blank on react navigation, follow read the [react navigation docs](https://reactnavigation.org/docs/getting-started/) instead.

## Hello React Navigation

- React Native doesn't have a built-in API for navigation like a web browser does. React Navigation provides this for you, along with the iOS and Android gestures and animations to transition between screens.
- `Stack.Navigator` is a component that takes route configuration as its children with additional props for configuration and renders our content.
- Each `Stack.Screen` component takes a `name` prop which refers to the name of the route and `component` prop which specifies the component to render for the route. These are the 2 required props.
- To specify what the initial route in a stack is, provide an `initialRouteName` as the prop for the navigator.
- To specify screen-specific options, we can pass an `options` prop to `Stack.Screen`, and for common options, we can pass ``screenOptions` to `Stack.Navigator`

## Moving Between Screens

- `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.
- We can call `navigation.push('RouteName')` as many times as we like and it will continue pushing routes.
- The header bar will automatically show a back button, but you can programmatically go back by calling `navigation.goBack()`. On Android, the hardware back button just works as expected.
- You can go back to an existing screen in the stack with navigation.`navigate('RouteName')`, and you can go back to the first screen in the stack with `navigation.popToTop()`.
- The `navigation` prop is available to all screen components (components defined as screens in route configuration and rendered by React Navigation as a route).

## Passing Parameters to Routes

- `navigate` and `push` accept an optional second argument to let you pass parameters to the route you are navigating to. For example: `navigation.navigate('RouteName', { paramName: 'value' })`.
- You can read the params through `route.params` inside a screen
- You can update the screen's params with `navigation.setParams`
- Initial params can be passed via the `initialParams` prop on Screen
- Params should contain the minimal data required to show a screen, nothing more

## Customizing the header bar

- You can customize the header inside of the `options` prop of your screen components. Read the full list of options in the API reference.
- The `options` prop can be an object or a function. When it is a function, it is provided with an object with the `navigation` and `route` prop.
  You can also specify shared `screenOptions` in the stack navigator configuration when you initialize it. The prop takes precedence over that configuration

## Header buttons
You can set buttons in the header through the `headerLeft` and `headerRight` properties in `options`.
The back button is fully customizable with `headerLeft`, but if you just want to change the title or image, there are other options for that — `headerBackTitle`, `headerBackTitleStyle`, and `headerBackImageSource`.
You can use a callback for the options prop to access `navigation` and `route` objects.

Hopefully, you found this useful, am still learning react native and I'll be sharing more or better content about it and other stuff, so make sure to subscribe to my newsletter so that you don't miss out on my other articles.