Bottom Tab Navigation in React Native

Published: 30 December 2019
on channel: Computer Science Tutorial
16k
158

Hello Friends

Bottom Tab navigation is a special type of navigation in react native which allow the user to move from one screen to another screen.
In Bottom Tab Navigation, a horizontal bar will appear at the
bottom of screen.This bar is divided into multiple sections
which are called as TABS.
When we click on any Tab, it will display related screen.

The following steps are used to implement Bottom Tab Navigation
in React Native
1). Create App
2). Design the screens like Home,Profile,Cart and Test the UI
3). Install the Packages required for Bottom Tab Navigation
4). Add Bottom Tab Navigation Component in Home.js file
5). Run the App

Command to create Appreact-native init btn
App name must be in lower case only

Command to install packages for Bottom Tab Navigation
1). npm install react-navigation --save
2). npm install react-native-gesture-handler --save
3). npm install react-navigation-material-bottom-tabs --save
4). npm install react-native-elements --save
5). npm install react-native-vector-icons --save
6). npm install react-native-paper --save

Command to Link Dependency
1). react-native link react-native-elements
2). react-native link react-native-vector-icons

Command to run App
react-native run-android

If you like this video or have any suggestion, please write it into the comment section.


WebSite
Facebook
Twitter
Raddit
Tumbler
Instagram
Linkedin
VK


Watch video Bottom Tab Navigation in React Native online without registration, duration 33 minute 25 second in high hd quality. This video was added by user Computer Science Tutorial 30 December 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 16 thousand once and liked it 158 people.