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

[@alperenbugduz1440]

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

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

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

[@IlustraStory30]

marginLeft : 20, marginRight : 20,

[@jonathanbryant1191]

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

[@boc_fan]

Bro this music is awesome, finally not a dull tutorial

[@stanisawjarocki1747]

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

[@jundleon]

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

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

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!

[@kdu97]

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

[@christopherreif3624]

Please keep making RN tutorials. I genuinely enjoy them.

[@horimiyarawstyle]

first great tutorial I see without Expo,

[@raribeir]

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

[@chiderapaulugwuanyi9843]

Very informative. Always looking forward to your tutorials.

[@jasonloureiro5018]

Parabéns amigo, ótimo tutorial!

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

[@jd-haque]

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

[@chervindavasol4704]

More React Native tutorials please, love your videos

[@itzpradip]

More to come!

[@rajuvadnala]

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

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

[@rjwhite4424]

Really cool custom bar!

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

[@mahanteshpatil7234]

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

[@jcxpjau]

Perfect...thanks man!

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

[@barisonurme]

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

[@yardtech7259]

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

[@richillartloe]

This is very helpful! thank you very much

[@sasindutech]

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

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

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

[@ardasatata]

Thanks!, This inspires me for my next project

[@FabianD1991]

Great Tutorial!

[@rakeshpk4991]

Very helpful tutorial. Thanks!

[@guillermohedzko589]

Excelent work!!! thank you!

[@Nicolas0325]

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

[@valentynratov7104]

Nice the lesson, more videos similar to this!

[@vedatsozen]

Really fantastic explanation.

[@mfk8475]

Thank you from Türkiye!

[@jamaludin-ut7qv]

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

[@vitorpeixoto915]

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

[@ping-pong4552]

thanks for the great content ❤️

[@junnieadriano5351]

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

[@marammarzouki1969]

good tutorial! thank you

[@RC-hi5sj]

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

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

[@Mayanksingh-qp6dy]

Awesome tutorial

[@alexandrehjodai]

Great tutorial

[@Moonlight-kh9pr]

good lesson. very easy and without water

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

[@luk1pr0]

You are awesome mate

[@sahil-u7b]

thankyou for the content :)

[@justinphilip3502]

Well explained thanks!

[@danilapetrov2765]

Thank you my friend!

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

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

[@slo74designwebmobiledevelo67]

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

[@expryan]

Help me so much, thank you.

[@layrfelipe7904]

Nice tutorial!

[@khalediman9740]

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

[@MrFawads]

great video man . Actually my problem.

[@jillurrahman9180]

very good content, thank you brother

[@itzpradip]

Glad you liked it!

[@sidsarasvati]

Nice! well done

[@jaysolanki593]

Amazing dude,,, you are diamond

[@BullyGarfield.]

Timestamps for personal use: 6:35

[@nileshzemse]

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

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

[@tebogowilliam8541]

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

[@BrayanMCrespoEspinoza]

Nice, Thakns!

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

[@Redes-Antisociales]

Great video bro

[@jaiderpanqueva2468]

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

[@Bobber-m8i]

Good job!

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

[@tweetgorge6588]

Best Tutorial

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

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

[@amazingworldshorts3796]

Very useful information

[@thameemansari7514]

one word Awesome

[@taylor.galbraith]

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

[@rathierry]

Thank you so much!!!

[@itzpradip]

You're welcome!

[@MahaveerSaini-v6m]

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

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

[@kunfun1916]

nice tutorial

[@ppsdeveloper9448]

Thank you teacher pradip.

[@itzpradip]

You are welcome

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

[@shakirhurrah2535]

Awesome bro .....

[@hendoitechnologies]

Post full course video about React Native CLI

[@whatthefood9983]

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

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

[@anmecode]

Excelente, gracias :)

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

[@stefancatalin1552]

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

[@habeelkhan2332]

sir that tab bar option or style is not showing in my program whats the reason

[@Piggiesgod]

check the comments up, the tutorial is old, you have to change some things

[@rezamohammadi1210]

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

[@aasimmmalik1231]

Thanks brother ...

[@surinderpanwar9049]

my TabNavigator tag style not working . any suggestion?? i m working on EXPo ?

[@surinderpanwar9049]

import React from 'react'; import { StyleSheet, Text, View, ImageBackground, TouchableOpacity } from 'react-native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { MaterialCommunityIcons } from '@expo/vector-icons'; import HomeScreen from '../screen/home'; import EventBooking from '../screen/events'; import ShopOnline from '../screen/shop'; const Tab = createBottomTabNavigator(); const Tabs = () => { return ( ( ), }} /> ( ), }} /> ( ), }} /> ); } export default Tabs;

[@surinderpanwar9049]

this is not working tabBarOptions

[@b_tongheng]

thanks alot

[@lilykiwna7236]

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

[@vishwakin3108]

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