Install the bottom-tab library to use the functionality
npm install @react-navigation/bottom-tabs
We are applying the stack Navigation to the app component and creating it as the NavigationContainer so that we will make some custom Component on the diffrent type of the navigation as satck Navogation ,BotttomTavNavigation,MaterialBottomTabNavigation and all
so we just redirect on that page and every Singla page will has diffrent type of Navigation Type
App.js
Phone View
On Pressing the stack Navigation
On pressing the Bottom Tab Navigation
When Clicking on the NewPage inside the BottomTabNavigation Then having a error
StackNavigationcomp.js
Here we are applying the stack Navigation property
BottomTabNavigation.js
here we are applying the bottomtabnavigation property
we can give the headerShown =false to hide the top bar having the title of the component
In Bottom Tab Navigator we can give the puticular icon to a tab
The above method is used to give icon by a single method or else we have to give the icon individually
MaterialBottomTabNavigation.js
first you need to install some dependencies
npm install @react-navigation/material-bottom-tabs npm i react-native-paper
Then Import it into the app.js
Then import the navigator into MBTN function and use it
It has some features like you can change the tab color and it has some by default animations
MaterialTopTabNavigation.js
You have to download The top tab library
npm install @react-navigation/material-top-tabs npm install react-native-pager-view npm install react-native-tab-view
Then you have to import it into app.js
It has some awsome features like you can navigate between the screen by sliding on the page
Problem
Here We are wrapping the navigator with View Tag that will create problem in rendering the components
So Just remove the View to render the component without any problem