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