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.

This is a continuation of Part 2. We will now be adding tabs using React Native NavigationExperimental, continuing from the project that we left off in part 2.

To see part 1, click here.

To see part 2, click here.

To view the final working code and repo, click here.

To start from part two, clone this repo.

As you can see above, we still have our main navigation stack in the app, but it will no longer be the main entry point. The main entry point will now be our Tab component. The previous Route stack is now just one of three tabs we will be implementing: Main (previous main entry point), Recipes, and Samples.

First, let’s create the two new components that will be going into the other two tabs in the app. In app/components, create Recipes.js and Samples.js:

Samples.js:

Recipes.js: