arrow icon


Navigation in React Native

Navigation has been a hot topic in React Native from day one. There have been many attempts to solve it. All of them follow different concepts and might fit better or worse for different use-cases. In this section we’ll present market leading solutions and teach participants about their differences and when to use one or another.

6 hours
React Native


Training schedule

a. Discuss available navigation options

Present the available navigation solutions to the audience. We’ll briefly talk about legacy options and focus on two leading libraries. The goal here is to make the audience aware of the architecture difference between `react-navigation` and `react-native-navigation` and teach them when to pick one option instead of another.

b. Understanding `react-navigation` and `react-native-screens`

After learning the architecture of `react-navigation` in the previous section, we’ll go deeper into the library’s usage. We’ll show several patterns used in real life and try out different navigators. At the end, we’ll integrate `react-native-screens` into our project and guide the audience through the concepts behind this library and its usage.

c. Creating sample stack, tab and drawer navigators with `react-navigation`

We’ll start with the market-leading JS-based navigation solution. We’ll explain the concepts of Stack, Tab and Drawer navigation, and implement each of them using `react-navigation`.

d. Creating sample stack, tab and drawer navigators with `react-native-navigation` (v2)

As soon as we finish working with the react navigation, we will introduce its market competitor, and use it in the app that we just created. It will make participants familiar with both solutions, as they already know the architecture differences; after this section they should be able to choose the best navigation solution on their own.

e. Shared element transitions with `react-navigation`

The goal of this section is to create outstanding shared element transition animation. At this point we plan to show participants how to tackle the most complex animations with the “divide and conquer” approach.


Let's work together!

Please note that training module are enterprise-oriented

other modules

See more modules


Choose module for your React Native Training for Enterprises

I hereby agree for sending me by Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.