Bottom Navigation Bar Tutorial in React Native

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...

[@nazaratulikhmalmohd2983]

This tutorial was extremely helpful. Btw I'm very new to react native and would love to learn more. Cheers mate!

[@kaancavdar4808]

Did you learn?

[@OliverHutcheon]

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.

[@lidor2]

Hi, I wanted to know how I can navigate to pages without having to add them to the bottom navbar

[@RaynierL]

How can I change the color of the white bar

[@jaewonyun3952]

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.

[@k3nzxc584]

I've watched this video a few times and literally have NO idea where your accent is from!

[@re_allyedge]

Cool tutorial!

[@anonymousentity5106]

My bottom tab keeps on getting pushed by keyboard. Is there any solution to make it stick to the bottom?

[@bnoblephoto]

how to adjust the color of the tab bar?

[@victorinacapita4982]

How do you run the expo again?

[@BuzzTheUnicorn]

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.

[@jonathanblack1660]

Did you ever work out how to do this? How do you navigate to a screen that isn't one of your tab screens?

[@fluffybunny510]

Add it in the stack navigator , in stack navigator add your bottom or draw nav as root component, along with your other screens

[@emilypark8144]

This is what I was looking for, thanks!!

[@vasantharajar9721]

great video

[@gil1537]

tabBarOptions does not exist in my Tab.Navigator. How can i solve this problem ?

[@asharalvany5129]

Did you ever figure that out?

[@abdur-rahmaanmohabbat600]

@@asharalvany5129 I found that by putting most options in screen options worked. not sure about any further solution than that

[@parkwinthrop585]

in the MainContainer.js change teh tabBarOptions to screenoptions. it is on line 42 i think.

[@ibnjalal9217]

@@parkwinthrop585 if you put tabbaroptions the compiler will suggest the appropriate change cus its syntax changes with screenoptions

[@user-mycollect]

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.

[@sam_55555]

How can we add this bottom navigation bar to a wordpress website converted to a mobile app using WebView? Please guide.

[@juliafaria7306]

it was very helpful! Thank you!!

[@gaminglorerd3686]

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!

[@prasannapatil8479]

At top (above the frame)actually I get a screen name but actually I don't want it how to remove it.

[@AzizKhan-or8yp]

Thanks for this amazing tutorial, that's I was looking for. ❤❤❤❤

[@adityakulkarni6204]

How can we add repel effect on Bottom navigation bar tabs? I am using normal bottom navigation not material one

[@seanghakheng5369]

Excuse me how to change the color of navigation bottom bar because I can't change it.

[@sithabisohlanze8650]

I wish you best life ever man! Your explanations are so on point

[@navjotsingh2457]

Ty

[@ThanHtutZaw3]

how can I horizontal scroll Like Facebook mobile app ?

[@NRoX2]

hi my bottombbar doesnt show up on my expo snacks, may i know why

[@beckfoster5109]

Sir, your video saved a lot of my time! Thank you!

[@chiho8119]

From ReactJS jumping to React Native makes live much easier!

[@younesabdenaceraitemrar5252]

so cool to find such a content from such a pro like you :)

[@numanmunir8818]

I have some issue in the code can you help me it.

[@galileor713]

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

[@JEsterCW]

Learn how to use documentation :)

[@ausama95]

I have the same issiue, height doesn't work! did you get it to work?

[@devashishpujari]

Same issue 😬...did you find solution?

[@emporteme]

@@ausama95 did you found?)

[@ausama95]

@@emporteme no

[@allansantos-bx3di]

Very Good

[@JumaInTech]

I wish I saw this earlier. Thanks alot👏

[@codemaster2107]

If possible, Can you please make another video of bottom tab navigation with header bar with button

[@AbdulWaheed-ib4nm]

Best tutorial on bottom navigation bar. It is Very Clear and concise.

[@RootsMj]

Really good and helpful tutorial for anyone new to React Native! 👏

[@Sarah772u3]

This was the best tutorial. Thank you for this video!

[@unbekannt8926]

Really nice and clear tutorial, thanks. How do you optimize the size of the ioncions with dimensions?

[@45sbdfbfd9]

Great tutorial. Thanks a lot for making this.

[@Indently]

Happy it could help!

[@HeitorYT]

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!!!

[@Indently]

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!

[@HeitorYT]

@@Indently i copied and pasted and i didn't find a answer ;-;

[@HeitorYT]

@@Indently i'll try again tomorrow because it's too late(10:30pm)

[@LuisGAldama]

i had the same mistake and i do not how to fix it :(

[@urtechvibe]

thanks brother

[@theusurper]

this is one of the best tutorials I've ever seen

[@tetricko]

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

[@ricodane6847]

Did u solve this?

[@sergiodamm3705]

@@ricodane6847 check out my workaround, hope this helps

[@elmoukhtafikhadija9216]

A nice video thank you!!

[@arikmosfor4907]

greatest tutorial.make more please.

[@superbin6021]

thank you teacher

[@gil1537]

Hello ! nice video but the icons do not appear on an android phone, what can i do ?

[@gil1537]

on my android*

[@SWAMP1ZZO]

try adding them through terminal manually: npm install react-native-vector-icons

[@divinebanana9782]

why isn't the height working for me ?

[@emporteme]

Hi, fixed it?

[@tomoliver_music]

nice one

[@yisrelindrawan8654]

how do you install the ionicons there?

[@Indently]

If I didn't mention it in the video, it's because they were already installed.

[@numanmunir8818]

@@Indently Then how to install it

[@Indently]

@@numanmunir8818 If I didn't mention it in the video, it's because they were already installed.

[@SWAMP1ZZO]

try adding them through terminal manually: npm install react-native-vector-icons

[@SWAMP1ZZO]

@@numanmunir8818 try adding them through terminal manually: npm install react-native-vector-icons

[@antonyndungu5514]

Awesome tutorial, brief, clear and concise.

[@jhramirezr]

You already made the same video with Expo .... Would make more sense to make it Without Expo

[@Indently]

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.