Bottom Navigation Bar Tutorial in React Native

[@theusurper]

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

[@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?

[@AbdulWaheed-ib4nm]

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

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

[@sithabisohlanze8650]

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

[@RootsMj]

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

[@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 :)

[@emilypark8144]

This is what I was looking for, thanks!!

[@beckfoster5109]

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

[@Sarah772u3]

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

[@antonyndungu5514]

Awesome tutorial, brief, clear and concise.

[@JumaInTech]

I wish I saw this earlier. Thanks alot👏

[@AzizKhan-or8yp]

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

[@re_allyedge]

Cool tutorial!

[@lidor2]

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

[@juliafaria7306]

it was very helpful! Thank you!!

[@arikmosfor4907]

greatest tutorial.make more please.

[@45sbdfbfd9]

Great tutorial. Thanks a lot for making this.

[@Indently]

Happy it could help!

[@RaynierL]

How can I change the color of the white bar

[@bnoblephoto]

how to adjust the color of the tab 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.

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

[@unbekannt8926]

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

[@victorinacapita4982]

How do you run the expo again?

[@tomoliver_music]

nice one

[@vasantharajar9721]

great video

[@codemaster2107]

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

[@k3nzxc584]

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

[@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

[@adityakulkarni6204]

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

[@sam_55555]

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

[@elmoukhtafikhadija9216]

A nice video thank you!!

[@allansantos-bx3di]

Very Good

[@anonymousentity5106]

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

[@seanghakheng5369]

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

[@urtechvibe]

thanks brother

[@superbin6021]

thank you teacher

[@NRoX2]

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

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

[@navjotsingh2457]

Ty

[@numanmunir8818]

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

[@prasannapatil8479]

At top (above the frame)actually I get a screen name but actually I don't want it how to remove 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

[@ThanHtutZaw3]

how can I horizontal scroll Like Facebook mobile app ?

[@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

[@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

[@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

[@divinebanana9782]

why isn't the height working for me ?

[@emporteme]

Hi, fixed it?

[@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 :(

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