React Native NavigationExperimental in Depth

Nader Dabit
React Native Training
11 min readDec 8, 2016

--

In this tutorial, I will go over everything I have learned and show you how to build robust full featured navigation using NavigationExperimental.

The final repo for this project can be found here.

NavigationExperimental is no longer the preferred method of Navigation in React Native, and will soon be deprecated. I would suggest checking out React Navigation with is the current standard and my preferred method of navigation.

The React Native NavigationExperimental API has come a long way since it was first announced almost a year ago today.

What we will cover here:

NavigationCardStack

  1. Implementing a reducer to handle route state
  2. Adding a navigation header
  3. Implementing Redux to handle route state
  4. Implementing Tabs

NavigationTransitioner

  1. NavigationTransitioner implementation
  2. NavigationCard
  3. NavigationCard with header
  4. Implementing a reducer to handle route state
  5. Implementing Redux to handle route state
  6. Implementing custom NavigationCard built from scratch using Animated.View

--

--

Nader Dabit
React Native Training

Full Stack Product Engineer, Author, Teacher, Director of Developer Relations at Avara