Bottom Tab Navigation in React Native
Ғылым және технология
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.
#react #reactnative #reactnativetutorial
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 www.computersciencetutorial.com/
Facebook / computersciencetutorialss
Twitter / cs_tutorial
Raddit / cstutorial
Tumbler / computersciencetutorial
Instagram / computersciencetutorial
Linkedin / computersciencetutorial
VK computersciencetutorial
Пікірлер: 22
I just want to say thank you very much for this. I went through multiple tutorials and a bunch of installs to no avail. Afterwards, I came across your tutorial. I followed it step by step (with multiple rewinds), debugged some steps on my own, and I did it! I learned a lot in the process too. Thank you very much for sharing your steps!!!
@ComputerScienceTutorial
4 жыл бұрын
Thanks for your valuable feedback
@xavieramari9634
2 жыл бұрын
I guess it is quite off topic but do anyone know a good place to stream new series online?
@jaspermarshall3973
2 жыл бұрын
@Xavier Amari ehh I'd suggest Flixportal. Just google for it:) -jasper
@xavieramari9634
2 жыл бұрын
@Jasper Marshall thanks, I went there and it seems like they got a lot of movies there =) I appreciate it!
@jaspermarshall3973
2 жыл бұрын
@Xavier Amari Happy to help =)
thank you, great tutorial !
Best tutorial, Thank you
@ComputerScienceTutorial
3 жыл бұрын
Thanks for sharing your valuable feedback
love it bro
Very informative. My only problem is I can't get the icons to show up. I installed as directed and they are showing up in the project folder.
Appreciate your work❤️ just a question react or flutter !
@ComputerScienceTutorial
4 жыл бұрын
React native and react Js
@seankang
4 жыл бұрын
I found some instructions on how to do this similar concept for flutter. It was simple and did not have issues. It ran fine for both ios and android simulators. willowtreeapps.com/ideas/how-to-use-flutter-to-build-an-app-with-bottom-navigation
Your instructions were clearer than most other tutorial but I ran into "Unrecognized font family 'Material Icons' when running in iOS simulator. If I press "dismiss" in that initial error, and try to let it proceed. then the main screen appears with the two tabbed buttons but the icons were missing. When running on the android simulator, I dont get that error, but the icons are missing on the android simulator. I put my git repo on a public place. bitbucket.org/seankang/drawer/src/master/. I looked around for possible fixes for this, but havent found it yet. Any help would be most appreciated.
tabBarIcon:()=>{ } I'm writing this code and it's give me warn : React.createElement : type is invalid -- expected a string.. and when i'm using tabBarIcon:()=>( ) it gives me warn + error both
Sir would you share the files you code in your videos so if any error occurred we can understand by file. In this video, you only show the code of navigation in home screen but in Profile or cart screen code is not shown then how we can run the code without any error and get perfect output
I am getting an issue TypeError: (0,_reactnavigation.createAppContainer) is not a function. (in '(0,_reactNavigation.createAppContainer)
@onion47ag
4 жыл бұрын
Kshitija sankhe I have the same issue, I guess it’s about the react-navigation verison. If you solve pls send me an email: utkancaki97@gmail.com
@mehwishhussain7225
4 жыл бұрын
@@onion47ag did u solve this issue..?I need your help kindly leave a mail for me if u solve it ...."Mehwish5422@gmail.com"
how to hide default bottom bar in react native?