Custom Bottom Tab Navigator in React Native | React Navigation v5 Tutorial

[@stanisawjarocki1747]

NOTE: - In Tab.Navigator change: "tabBarOptions" => "screenOptions" - To style Tab.Navigator use: screenOptions={{tabBarStyle: {postion: "absolute",},}}

[@jundeleon8704]

thanks bro

[@jbnunn]

And just for full code if anyone needs it, screenOptions={{ tabBarShowLabel: false, tabBarStyle: { position: 'absolute', bottom: 25, left: 20, right: 20, elevation: 0, backgroundColor: '#ffffff', borderRadius: 15, height: 90, } }}

[@HeliosJM]

@@jbnunn Thanks

[@BallerMcBallersonn]

@@jbnunn Shoutout to you and Stanislaw. You guys just helped me after i've spent 3+ hours trying to figure it out

[@Piggiesgod]

@jbnunn @stanisawjarocki thank you guys

[@realtorBG]

V5 => V6 tabBarOptions = screenOptions/options showLabel = tabBarShowLabel headerShown: false

[@krushnanaghate4858]

ohh thank you any other changes ?

[@giovanne_gtr]

@@krushnanaghate4858 style = tabBarStyle

[@tushardeora8811]

also do tabBarIconStyle: { display: "none" } to remove default icons

[@Piggiesgod]

@@tushardeora8811 thx

[@alperenbugduz1440]

Very nice tutorial!! No fixings, clear speech.. Make more react-native tutorials please :))

[@hotaryuzaki]

there is a bug for middle tab bar, onpress in top half cannot be click. the problem is from RN itself, overflow component from it's parent cannot accomodate onpress but visibility only Mr. Pradip in 13:45 was not demonstrated press in top half. sooo, is there anyone have a solution for that issue?

[@jonathanbryant1191]

THANK YOU!! I'm working on my first project and really struggled to understand the docs. This is a great walkthrough. Thanks again!!!

[@jbnunn]

This was a great tutorial, thanks @Pradip. As others have said, your style is refreshing. It's to the point without a lot of fanfare, just what is needed, keep up the good work!

[@boc_fan]

Bro this music is awesome, finally not a dull tutorial

[@christopherreif3624]

Please keep making RN tutorials. I genuinely enjoy them.

[@kdu97]

After many tutorials, you saved me! Thank you!!

[@horimiyarawstyle]

first great tutorial I see without Expo,

[@hendoitechnologies]

Your video is very easy to understand slow and steady..... As a beginner can learn and understand easily.. Thanks.. Can you post full course video for developers in "React Native CLI" end to end all concepts... Waiting.

[@chervindavasol4704]

More React Native tutorials please, love your videos

[@itzpradip]

More to come!

[@nictus168]

Thank you so much! I was having trouble finding a tutorial that uses the react native cli instead of expo.

[@barisonurme]

Feeling safe when you start playing video and hear the accent:)

[@АлиВелиев-ъ4о]

You are the best! Really. No empty words! Strike to the point! Thank you

[@mahanteshpatil7234]

Thank you so much for your video, this is great, highly appreciated, kindly combine other navigations in one single app please

[@rajuvadnala]

Thank you very much for the tutorial Pradip, wonderful work.

[@udbz7264]

This is a outdated. For new tab navigation. Use screen options and set those tab option values under a key in screen options called tab bar style. Also set tabbarshown as false still under screenoptions to hide the tab labels

[@WagmiVibes]

This was really helpful bro, thanks a lot ❤

[@harshdeep7015]

But we can't apply animation to it

[@codewithgowtham]

Hi . First of all Thankyou for information and next one question tabbaroptions is not work in my react native file ? please answer the questions

[@jd-haque]

You're really good bro. Learnt some thing new today. Cheers.

[@rjwhite4424]

Really cool custom bar!

[@chiderapaulugwuanyi9843]

Very informative. Always looking forward to your tutorials.

[@AnkushJainbl]

Great video. Elaborate and to the point. Keep up the good work!

[@raribeir]

Excellent tutorial as usual. Keep up with the good work!

[@patrioticgrind]

I was stressing about why theres this extra frame or box underneath my bottom navigation. Then it disappeared when I added the property and value " position: 'absolute' " as I was following along your video. Thank you!

[@Nicolas0325]

thanks a lot for the tutorial. How would you have the post button dissapear when focused?

[@ardasatata]

Thanks!, This inspires me for my next project

[@jasonloureiro5018]

Parabéns amigo, ótimo tutorial!

[@vedatsozen]

Really fantastic explanation.

[@yardtech7259]

Waiting for your chat with firebase 🔥 2nd part btw Great video as always

[@richillartloe]

This is very helpful! thank you very much

[@vitorpeixoto915]

Hey man! Thanks for sharing and for showing your package.json!!!!

[@eftynur15]

this tutorial is easy to understand. Great job.

[@BullyGarfield.]

Timestamps for personal use: 6:35

[@Moonlight-kh9pr]

good lesson. very easy and without water

[@jcxpjau]

Perfect...thanks man!

[@mfk8475]

Thank you from Türkiye!

[@nileshzemse]

very good tutorial... now navigation version 6 has also come, you can create videos on version 6

[@MrFawads]

great video man . Actually my problem.

[@rakeshpk4991]

Very helpful tutorial. Thanks!

[@FabianD1991]

Great Tutorial!

[@rajanayel7447]

Sir Kindly make React native series from basic to advance.

[@itzpradip]

Thanks for your comment & suggestion.

[@RAMANKUMAR-fc8sf]

Sir your method of explanation is best. Kindly create a react native playlist from basic to advance

[@marammarzouki1969]

good tutorial! thank you

[@yannrochard7471]

Unfortunately, on the central button, you can't click on the part that protrudes from the menu (the upper part of the button) :/

[@dougmalones8702]

did you ever find a solution for this?

[@Yami1337Gaming]

I have the same problem on Android.

[@RavindraThoriya]

Very good video and explanation, tried above example but plus icon not display in center or second tab only display red color circle. what am I missing?

[@khalediman9740]

U r great keep posting like this video 👍👍👍👍 , much appreciated sir

[@RC-hi5sj]

hey my friend your tutorial is very good , many thanks to you it will be a big help to my project

[@Mayanksingh-qp6dy]

Awesome tutorial

[@guillermohedzko589]

Excelent work!!! thank you!

[@sasindutech]

Great!!! This is a really good and working tutorial ... Always Thank you

[@geoffreyngugi6144]

Hello Thanks for this tutorial. Unfortunately this does not work when the bottom tab navigator is inside drawer navigator

[@rahulagrawal228]

Did you found any solution?

[@geoffreyngugi6144]

Not yet, still stuck. Would be glad if you can assist.

[@Sasuke-kc6dw]

@@geoffreyngugi6144 you found something? :)

[@geoffreyngugi6144]

@@Sasuke-kc6dw Not yet. I had to work without the custom design

[@alexandrehjodai]

Great tutorial

[@Ayush_kumar123]

Bro Pradeep your content is really good, but if you could provide the starter code template and the assets folder it would be great.

[@ping-pong4552]

thanks for the great content ❤️

[@jamaludin-ut7qv]

thank you my friend from prindavan, i love you your tutorial help me a lot from my hell assignments

[@jaysolanki593]

Amazing dude,,, you are diamond

[@slo74designwebmobiledevelo67]

Good tutorial. Could you repeat for Navigation v6 from scratch and creating different screens to show what imports are necessary? Great thanks👌

[@jaiderpanqueva2468]

Incredible tutorial, how did you do the animation at the beginning of the video?

[@MahaveerSaini-v6m]

I have used this, but i con't change background color of bottom bat bar. I have follow your style.

[@taylor.galbraith]

How would you go about doing this to show on many screens that are not in the navbar?

[@elkincobos7235]

Hello, Pradip first of all excellent tutorials, I wish you could do a tutorial with gallium, because there is practically nothing on the web. Thank you very much

[@stefancatalin1552]

How you deal if some content on the active page will be behind the Navigator ?

[@jillurrahman9180]

very good content, thank you brother

[@itzpradip]

Glad you liked it!

[@rezamohammadi1210]

Thanks, how we can make a fab in bottom nav?

[@hendoitechnologies]

Post full course video about React Native CLI

[@junnieadriano5351]

Thank you very much for this great video it helps me a lot

[@luk1pr0]

You are awesome mate

[@layrfelipe7904]

Nice tutorial!

[@vishwakin3108]

Can you please let me know if there's a way to insert a hamburger menu inside bottom tab navigator?

[@sahil-u7b]

thankyou for the content :)

[@justinphilip3502]

Well explained thanks!

[@expryan]

Help me so much, thank you.

[@Redes-Antisociales]

Great video bro

[@danilapetrov2765]

Thank you my friend!

[@deoarlo]

I did this and there is a problem when we hide the navigation: it will still show a bit and not hide fully because we elevate the navBar from the bottom edge of the screen. Anybody know a work around to this?

[@HoschelGraphics]

First of all, thank you for your video. I encountered an error, my buttons do not appear, can you help me how to fix this?

[@dinahayukotv9529]

Where and how can I download / get this .png images you are using as icons. Kindly let me know.

[@boscokuttikatt7105]

Hey thanks it's was helpful but after build the apk size became 125 mb. How to reduce it, as I have only added bottom nav bar till now.

[@amazingworldshorts3796]

Very useful information

[@tebogowilliam8541]

Mmaaaaaan....you are the best!!!!!!!!

[@valentynratov7104]

Nice the lesson, more videos similar to this!

[@Ntamakoupa]

Thank you. Any idea why on android the top part of the button is not clickable ?

[@HotaraTakeo]

does styling work in android? Imean icons and colors?

[@Ntamakoupa]

@@HotaraTakeo yes works ok. Positioning is great its just not clickable above bar

[@indomitablelust]

did you find a way to solve this?

[@Ntamakoupa]

@@indomitablelust unfortunately no, changed a bit the UI. I think a custom bottom bar completely may solve it. Not sure

[@indomitablelust]

@@Ntamakoupa Yeah, I think so too, sad

[@ahmadfiraz7298]

im having trouble with position:"absolute", since it was position "absolute", the bottom tab component bury the content behind, is there anyway to get around this without defining the height 1 by 1 on each page?

[@krokogames7843]

Estou com o mesmo problema, conseguiu resolver?

[@tweetgorge6588]

Best Tutorial

[@ppsdeveloper9448]

Thank you teacher pradip.

[@itzpradip]

You are welcome

[@sidsarasvati]

Nice! well done

[@jha629]

good tutorial and good explanation , use ..... screenOption insted of tabBarOptions.

[@kunfun1916]

nice tutorial

[@tienthinhtruong2095]

how can i do that in MaterialTopTabs, i use this becoz bottomTab dont have swipEnable tab. Pls anwser me tks

[@whatthefood9983]

when you put backgroundColor as black or dark, there is white line at the top or tab bar, becareful to use that

[@Bobber-m8i]

Good job!

[@hendoitechnologies]

Waiting for React Native CLI full course video

[@KiranThorat-t7h]

Sir apne ye code github pe push kiya h ky????????

[@saicharanpogul]

Hi Pradip, I have been following your videos, helped me a lot. Is it possible to make a detailed tutorial on react-native-track-player, explaining all the features. Thank you.

[@itzpradip]

Great suggestion, I'll try to do it in near future. Thanks

[@saicharanpogul]

@@itzpradip Will be waiting for it. Thank You.

[@seeking9145]

​@@itzpradip Thebutton with the plus is just a red circle. Do you know how this could happen?

[@thameemansari7514]

one word Awesome

[@shanu_shikhar]

That's really use and something different and its appreciable but i really really want you to please add the UI like Flipkart if we press middle button .. if possible please take the look of Flipkart app and in that if we press middle button it opens a popup like structure ...

[@sandypatel55]

Can we create Same tab navigation like KZbin app? Means Present view on click on + button and keep existing top screen as it is.

[@itzpradip]

Yes, by customizing customTabBarButton component onPress prop. You can open a bottom sheet on onPress and for that refer to this tutorial kzbin.info/www/bejne/o5utq5SffNCUh6M, I think in this way you can achieve this layout.

[@lilykiwna7236]

Thanks for the tutorial! Could not find this anywhere, it would help if you would put the code somewhere too :)

[@grality]

Hi, sorry to disturb but i have received this error : " ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `BottomTabNavigator`."

[@MrMahir1997]

Bro , do you find solution , I also have this issue... :((

[@grality]

@@MrMahir1997 no sorry, too much problems with the npm modules ahah 😂, but i think the best way to fix this are to reinstall your packages and make tests in a New app

[@MrMahir1997]

​@@grality hahah , I feel so... bcs we have like all examples and video but ofc I will get this error...Thank you for reply btw :) Hope we will fix this soon. :D

[@jhramirezr]

I can't get the background color for the bottom tab to change. Help please ??