Build Real-world React Native App: React Navigation and React Native Vector Icons

Build Real-world React Native App: React Navigation and React Native Vector Icons

We use React navigation version 5 for Bootstrap app navigation and create a blank screen to show how it works finally we setup React native vector icons for add icon to tabs.

In this chapter, we use React navigation version 5 for bootstrap app navigation and create a blank screen to show how it works finally we setup react native vector icons for add icon to tabs.

install react-navigation version 5

In this version, the expo team divides into multiple packages for this app we use stack and tabs so the list below is the package that we need to install:

  1. react-navigation/native is the core package
  2. react-navigation/stack for general stack navigation style
  3. react-navigation/bottom-tabs for tab-style menu in bottom screen

In order to install these packages, we need to run the following command in the command prompt or command line of your IDE:

yarn add @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs

Here, we have installed the react-navigation package along with the react-navigation-stack and react-navigation-tabs package. The react-navigation-stack package enables us to create the navigator stack of our app screens. The react-navigation-tabs package enables us to create the bottom tab navigation on our main screen. Now, we also need to install the required dependencies in order to run the react-navigation package properly, Hence, we need to install the following package as well:

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Setup React Navigation on iOS

In case of iOS, we need to navigate to ‘./ios/’ folder and then run the following command:

cd ios ; pod install ; cd..

Setup React Navigation on Android

For Android, we may need to link the packages if the version of the react-native is less than 0.60. For that, we can run the following code for each package:

react-native link <package-name>

Organizing Project files and folder structure

n this section, we need to create the required files for the screens as shown in the ‘./screens/’ folder. We also need to create a Navigator.js file in ‘./components’ which will contain an overall code for navigation as shown in the screenshot below:

Folder structure

Folder structure

Now, for every screen file inside the ‘./screens’ folder, we need to add the starter react native template code. The starter template code for the Home.js screen is shown in the code snippet below:

import React from 'react'
import { View, Text } from 'react-native'

const Home = () => {
   return (
       <View>
           <Text>Home Screen</Text>
       </View>
   )
}
export default Home

Now, what we can do is, we can copy the same starter template code to each screen file and just change the main function name and the text between the Text element based on the name of the files.

react-native mobile-apps programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

A Short Guide to React Native App Development

React Native is undoubtedly one of the most widely used cross-platform frameworks for creating native-like apps. This framework can be easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.