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

In this tutorial, you'll learn how to create a custom bottom tab navigator in react native. I have created this custom designed bottom tab navigator by using react navigation v5.
React Navigation v5 Tutorial Playlist • React Navigation 5 Tut...
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ React Native News App Playlist • News App in React Nati...
► Timestamps
0:00 Introduction
1:37 Project Structure
3:07 Creating the bottom tab bar
5:22 Customize the bottom tabBar
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzpradip
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/

[@alperenbugduz1440]

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

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

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

[@DingleMcMingle]

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

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

[@jonathanbryant1191]

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

[@user-fu1ll6tr4x]

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

[@AnkushJainbl]

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

[@raribeir]

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

[@chiderapaulugwuanyi9843]

Very informative. Always looking forward to your tutorials.

[@kdu97]

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

[@christopherreif3624]

Please keep making RN tutorials. I genuinely enjoy them.

[@rajuvadnala]

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

[@boc_fan]

Bro this music is awesome, finally not a dull tutorial

[@kustan4]

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

[@nictus168]

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

[@eftynur15]

this tutorial is easy to understand. Great job.

[@sasindutech]

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

[@jasonloureiro5018]

Parabéns amigo, ótimo tutorial!

[@mahanteshpatil7234]

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

[@horimiyarawstyle]

first great tutorial I see without Expo,

[@jcxpjau]

Perfect...thanks man!

[@yardtech7259]

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

[@richillartloe]

This is very helpful! thank you very much

[@RC-hi5sj]

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

[@rjwhite4424]

Really cool custom bar!

[@rakeshpk4991]

Very helpful tutorial. Thanks!

[@jamaludin-ut7qv]

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

[@chervindavasol4704]

More React Native tutorials please, love your videos

[@itzpradip]

More to come!

[@ardasatata]

Thanks!, This inspires me for my next project

[@junnieadriano5351]

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

[@valentynratov7104]

Nice the lesson, more videos similar to this!

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

[@user-fb8dn8sk7r]

thankyou for the content :)

[@guillermohedzko589]

Excelent work!!! thank you!

[@TheFag]

great content!! Thanks a mil!

[@vitorpeixoto915]

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

[@Moonlight-kh9pr]

good lesson. very easy and without water

[@khalediman9740]

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

[@FabianD1991]

Great Tutorial!

[@ping-pong4552]

thanks for the great content ❤️

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

[@justinphilip3502]

Well explained thanks!

[@Mayanksingh-qp6dy]

Awesome tutorial

[@slo74designwebmobiledevelo67]

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

[@layrfelipe7904]

Nice tutorial!

[@marammarzouki1969]

good tutorial! thank you

[@vedatsozen]

Really fantastic explanation.

[@MrFawads]

great video man . Actually my problem.

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

[@danilapetrov2765]

Thank you my friend!

[@sidsarasvati]

Nice! well done

[@luk1pr0]

You are awesome mate

[@alexandrehjodai]

Great tutorial

[@Nicolas0325]

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

[@Fighterfilms1]

THANK YOU SO MUCH!!!!!

[@jaysolanki593]

Amazing dude,,, you are diamond

[@expryan]

Help me so much, thank you.

[@mfk8475]

Thank you from Türkiye!

[@BrayanMCrespoEspinoza]

Nice, Thakns!

[@FFergussond]

Great video bro

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

[@dierakramov6390]

Good job!

[@barisonurme]

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

[@tebogowilliam8541]

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

[@amazingworldshorts3796]

Very useful information

[@nileshzemse]

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

[@taylor.galbraith]

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

[@tweetgorge6588]

Best Tutorial

[@b_tongheng]

thanks alot

[@jaiderpanqueva2468]

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

[@shakirhurrah2535]

Awesome bro .....

[@anmecode]

Excelente, gracias :)

[@dickymaulana2123]

Hi Pradip, thanks for sharing .

[@itzpradip]

My pleasure

[@rathierry]

Thank you so much!!!

[@itzpradip]

You're welcome!

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

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

[@kunfun1916]

nice tutorial

[@ppsdeveloper9448]

Thank you teacher pradip.

[@itzpradip]

You are welcome

[@thameemansari7514]

one word Awesome

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

[@muhammadfarooq4694]

Nice tutorial sooo informative sir Thanks for your efforts, Sir can you provide source code of this bottom navigation?

[@phatnguyenxuan5570]

thank you very much

[@phenixbd]

Awesome

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

[@aasimmmalik1231]

Thanks brother ...

[@sshikhar4290]

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

[@amirdiafi]

You are the best

[@lilykiwna7236]

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

[@jha629]

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

[@akashtiwari243]

Well done

[@statusseeker5387]

Amazing video sir ! Can you please make a animation app like flipaclip , PicsArt animator or animation desk apps

[@yahyaelfard6932]

Amazing Video! Can you please tell me how you made the intro? thanks

[@xiongbenjamin]

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!

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

[@erickcedeno7823]

Very nice video, where can i find those icons?

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

[@rezamohammadi1210]

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

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

[@Kajianid]

thanks

[@ongkaiboon3139]

Hi
Pradip Debnath , may I know where you get the source code in your App.js ?