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.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Mixing Storybook with Angular with a sprinkle of Applitools

Tradeoffs of Using Mobile Frameworks like React Native for Mobile Development Projects

JavaScript Tutorial

Set up React JS with ESLint, Prettier and Airbnb

Alibaba Clone Backend

Ag-Grids: The export mystery resolved

Android Build Variants in React Native | cmd, terminal

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

React Native Tutorials -5

10 Reasons: Why to consider React Native while building an application from scratch [Detailed…

How to Build an App with React Native Components

The proven way to use custom fonts in react native