Build App React Native – Navigation Sample P2

Tram Ho

In the previous post, I briefly introduced react-navigation , today I will do some small demos.

Animation Navigation Example

Example Code, I aim to the problem as follows:

  • Use a few animations for navigation
  • Check a few conditions and allow the navigation to leave the screen standing or not

Animation Config

As introduced a few animation in the previous post, I will always create an object to configure navigation as follows:

Here I am using spring animation for navigation.

The react-navigation library already has a few configs available and if we feel like we don’t need any more configs we can use the existing ones, but if you need to tweak a few then you can do something like that. me on top

In this way you can use the available configs of react-navigation and custom properties.

After configuring the navigation, we just need to put it on the Navigation stack as follows:

Handle BeforeRemove

So we have an animation navigation already, we go through 2nd function that is how we can block navigation from going to another screen.

In practice, there will be a few problems as follows:

  • When calling the API, the Loading Indicator will be displayed to let the user know that it is now waiting for the API to return results, but what if the user uses the back button on the devices, and it is obvious that we will goBack back to the front screen, although the Loading Indicator is still spinning.

To fix that, react-navigation since version 5.7 has added an event called beforeRemove , which allows us to be able to handle whether to allow navigation from the current screen or not.

So how do we configure it:

First we will write a function to intercept navigate like so:

and put it in the navigation as follows:

Looks delicious, but not quite right, because as the above code, the intention to enter AnimationNavigation2Screen will not be able to leave, because we have blocked beforeRemove already.

In my Project, I am using Mobx to manage state and will update the code as follows.

I will update the code in the beforeRemove function as follows:

Ok that sounds better, but the next question is where are we going to handle this ON / OFF.

In my example, I am handling it in the AnimationNavigation2Screen screen by calling the update State function of the NavigationStore

Then it’s really delicious, we can handle whether to allow navigate or not by state, everyone have a look at the results below.

Bottom Navigation

We will continue to come to Bottom Navigation, a type of navigation is used quite a lot with the navigation is located below the app. For example, in my app is demo.

We will usually have a few tabs ready for the user to easily navigate, so how will we handle it.

It sounds terrible, but we just need to apply it fully as the document from the manufacturer, the Document is here .


But in reality there are tabs that will need to force a user to Login before navigate, and the problem is we will check and prevent how to navigate.

Similar to the beforeRemove we will use another bottom navigation event, that is tabPress , with tabPress it allows us to do something before navigation can navigate.

And our job is simply to check if the User is logged in or not and if not then block it, I will update the Code as follows:

Ok let’s see the results it like.

Ok today, we will stop here, see you again

Share the news now

Source : Viblo