React (Native) Navigation

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 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.