Bottom Navigation Bar Tutorial in React Native
HTML-код
- Опубликовано: 26 сен 2024
- In this video I’m going to be showing you how to create a fully functional bottom navigation bar with screens that you can customise in React Native.
Everything you need can be found in this GitHub repo:
github.com/fed...
This tutorial was extremely helpful. Btw I'm very new to react native and would love to learn more. Cheers mate!
Did you learn?
This was really useful. I found I was getting a console error because tabBarOptions has been deprecated and was unable to set the height or padding with the style. Fixed with 'tabBarActiveTintColor', 'tabBarInactiveTintColor', 'tabBarLabelStyle' and 'tabBarStyle' which need to be added into the screenOptions object.
this is one of the best tutorials I've ever seen
Best tutorial on bottom navigation bar. It is Very Clear and concise.
I wish you best life ever man! Your explanations are so on point
Really good and helpful tutorial for anyone new to React Native! 👏
so cool to find such a content from such a pro like you :)
Sir, your video saved a lot of my time! Thank you!
From ReactJS jumping to React Native makes live much easier!
Thanks for this amazing tutorial, that's I was looking for. ❤❤❤❤
This was the best tutorial. Thank you for this video!
Cool tutorial!
Hi, I wanted to know how I can navigate to pages without having to add them to the bottom navbar
Awesome tutorial, brief, clear and concise.
I wish I saw this earlier. Thanks alot👏
Hello. Just a question how can we get just get the icon without the text? like home icon only, without the Home text! Thank you.
Great tutorial. Thanks a lot for making this.
Happy it could help!
it was very helpful! Thank you!!
My bottom tab keeps on getting pushed by keyboard. Is there any solution to make it stick to the bottom?
How can I change the color of the white bar
13:14 That specific line, 'style', simply doesn't do anything for me? No padding or anything that I add in that line affects anything, quick help on what I might be doing wrong or if it got updated onto something else? Thanks!
greatest tutorial.make more please.
how to adjust the color of the tab bar?
great video
What if i want to navigate to a screen, that should not be shown at the bottom? If i declare it inside the navigator it automatically appears.
Did you ever work out how to do this? How do you navigate to a screen that isn't one of your tab screens?
Add it in the stack navigator , in stack navigator add your bottom or draw nav as root component, along with your other screens
How can we add this bottom navigation bar to a wordpress website converted to a mobile app using WebView? Please guide.
Really nice and clear tutorial, thanks.
How do you optimize the size of the ioncions with dimensions?
How can we add repel effect on Bottom navigation bar tabs? I am using normal bottom navigation not material one
How do you run the expo again?
Excuse me how to change the color of navigation bottom bar because I can't change it.
A nice video thank you!!
Ty
hi my bottombbar doesnt show up on my expo snacks, may i know why
Very Good
tabBarOptions does not exist in my Tab.Navigator. How can i solve this problem ?
Did you ever figure that out?
@@asharalvany5129 I found that by putting most options in screen options worked. not sure about any further solution than that
in the MainContainer.js change teh tabBarOptions to screenoptions. it is on line 42 i think.
@@parkwinthrop585 if you put tabbaroptions the compiler will suggest the appropriate change cus its syntax changes with screenoptions
This video use @react-navigation/bottom-tabs version 5. However, tabBarOptions no longer exists in @react-navigation/bottom-tabs version 6, you should put options in screenOptions instead.
hi, I'm using your tutorial,
in my case style for padding and height is not working!
device: ios
also I want to edit background color, not working well
Learn how to use documentation :)
I have the same issiue, height doesn't work!
did you get it to work?
Same issue 😬...did you find solution?
@@ausama95 did you found?)
@@emporteme no
thanks brother
I've watched this video a few times and literally have NO idea where your accent is from!
I have some issue in the code can you help me it.
how can I horizontal scroll Like Facebook mobile app ?
if i have another stack navigator inside my app.js
but i want my bottom tabs navigator for other screens. so basically i have screens in stack navigator and when the client logs in i want to take him to the homepage with the bottom tabs navigator to navigate between home, appointments and profile.
how do i do it
Did u solve this?
@@ricodane6847 check out my workaround, hope this helps
Hello ! nice video but the icons do not appear on an android phone, what can i do ?
on my android*
try adding them through terminal manually: npm install react-native-vector-icons
C:\Users\PC\Desktop\LifeOrganizer
ode_modules
eact-native\Libraries\Core\ExceptionsManager.js:149
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
React-Navigation does not work!!!
We’re sorry to hear that you’re facing trouble with this tutorial. We have some recommendations for you.
- First, try watching the tutorial again to check if you missed something (remember that programming languages are strict, and that uppercase & lowercase characters are completely different.)
- Second, if you’re facing an error, try copying and pasting it into the Google search engine, it’s the fastest way to find the best response for the issue you are facing.
- Third, if it’s still too confusing for you, try taking a step back and working on an easier project to try to improve your programming skills before tackling the project in this video.
We wish you the best of luck with your project!
@@Indently i copied and pasted and i didn't find a answer ;-;
@@Indently i'll try again tomorrow because it's too late(10:30pm)
i had the same mistake and i do not how to fix it :(
why isn't the height working for me ?
Hi, fixed it?
how do you install the ionicons there?
If I didn't mention it in the video, it's because they were already installed.
@@Indently Then how to install it
@@numanmunir8818 If I didn't mention it in the video, it's because they were already installed.
try adding them through terminal manually: npm install react-native-vector-icons
@@numanmunir8818 try adding them through terminal manually: npm install react-native-vector-icons
You already made the same video with Expo .... Would make more sense to make it Without Expo
They're completely different, one uses the official material package, and the other one is fully custom.
But making without Expo is a good recommendation.
This is what I was looking for, thanks!!
At top (above the frame)actually I get a screen name but actually I don't want it how to remove it.
If possible, Can you please make another video of bottom tab navigation with header bar
with button
thank you teacher
nice one