React Native Tutorials -4

Mobile App

Welcome to the part-4 of the series. You can find part-3 here. We will learn about React Navigation in this part.

You can read more about it here. As per the latest documentation, we need to install these dependencies, if we are using react native cli.

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

We will be first using Stack navigation in our project. The documentation for the same can be found here. We need to install some additional packages for it.

npm install @react-navigation/stack
npm install react-native-gesture-handler
npm install @react-native-masked-view/masked-view

We will change our code in App.js to first include the required imports. After that we have two components of FirstScreen and SecondScreen.

We are also getting the navigation, as a props and using it to navigate to different screens.

App.js

Now, in the main function, we have wrapped everything with NavigationContainer. And then wrapped everything with Stack.Navigator. Here, we are using two Stack.Screen to show two different components.

App.js

Now, in the iOS simulator we can see the First Screen and a Go Second button, which will take us to the second screen.

Now, on the second screen we are seeing the header also and a button to go to the first screen.

We will first refactor our code to move the FirstScreen and SecondScreen in different files. So, create two files FirstScreen.js and SecondScreen.js inside the components folder.

Now, we will first add them in App.js file.

App.js

Now, in FirstScreen.js we will add the below content.

FirstScreen.js

Similarly, in SecondScreen.js file we will add the below content.

SecondScreen.js

Our app works as earlier. Now, we will first add Bottom tab in our project. We will first need to install it by npm. The details of this can be found here.

npm install @react-navigation/bottom-tabs

After that in App.js file, we will import the required things. Also, we have change the Stack Navigator to Tab Navigator.

App.js

Now, we are able to see the nice looking bottom navigation and also able to navigate between them.

Now, we will look into Material Top Tabs Navigator. We will first need to install it by npm. The details of this can be found here.

npm install @react-navigation/material-top-tabs react-native-tab-view

After that we also need to do pod install on a M1 based mac.

pod install

Next, in the App.js we are using the Top Tabs navigator like bottom tabs. But notice that we have also wrapped everything in a SafeAreaView, or else it was not showing due properly on iOS.

App.js

Now, we are able to see the awesome Top navigator.

Now, we will look into Drawer navigation and it’s documentation can be found here. We need to install the below dependencies in it.

npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

We also need to do the pod install again on a mac running M1 chip.

Next, we need to add the package of reanimated in the babel.config.js file.

Lastly, in the App.js file we are just using the required imports and using the Drawer. Also, notice that we are using some options in drawer.

App.js

Now, our drawer is working fine.

Now, we will learn to pass data through route. So, in App.js we will first pass an initialParams in FirstScreen.

App.js

Now, can show it in the FirstScreen.js file using the route.params.

FirstScreen.js

Now, we will be able to see the text in our FirstScreen component.

This completes part-3 of the series. The code for the same can be found here.