React Native Tutorial #18 - React Navigation - Tab Navigator - Material Tab at Bottom &Top

🔥 Get a discount on 'The Complete React Native Course 2023: from Zero to Hero' on Udemy by using the promo code D782E3. As the instructor, I'll be there to answer any technical questions you may have. Plus, you'll get access to more exams and coding exercises, updated content, and no background music or ads. After completing the course, you can get a valid certificate on Udemy to showcase your skills. Click the link below to enroll now with the discount.

--------------------------------------------------------------------------------

🌟 In this session, we will get acquainted with Tab Navigation at the bottom and top and use the font icon like Font Awesome in them.

--------------------------------------------------------------------------------

🔥 The Complete React Native Course:

💻 Project Source Code in GitHub:

🔗 React Navigation:

🔗 React Native Vector Icons:

🔗 Font Awesome:

--------------------------------------------------------------------------------

😍 Subscribe my channel for more React Native Tutorials:

💝 Join my channel to get access to perks:

--------------------------------------------------------------------------------

⏱️ Timestamps:
React Native Tutorial #18 - React Navigation - Tab Navigator - Material Tab at Bottom &Top
00:00 Intro
00:23 Separate components from the main screen
02:02 Tab Navigation
03:14 Vector Icons
07:40 Tab bar options
09:12 Material Bottom Tab Navigation
11:05 Material Top Tab Navigation

--------------------------------------------------------------------------------

#ProgrammingWithMash #ReactNative #TabNavigator

[mashschool]

If you have any questions about this or request tutorials in this style, be sure to leave a comment below, and thank you for liking the video. 😉

[RoshanTamilsellvan]

I'm already on this for three days and going strong! Thank you Mash, you rock!

[muhammadhamzaqadri]

when there is a new features is added in react native so please make a such wonderful videos for us on that topic.

[naveenchandar]

It helps me a lot.Thank you Mash for this wonderful explanation.

[mahmoudjameel]

Awesome bro < but I need ask about I need padding top in header to material-top-tabs Because I have problem in header not show please

[southredmondtoxik]

One of the best react native teacher♥️

[muhammadhamzaqadri]

thanks alot.
you are so a talented and amazing teacher.
when will the remaining videos will be uppload?

[leongvincent]

Thank you and appreciate all your great lectures. Please make a simple app when you can like an Instagram where user post fill a little form and then it displays in a card component on activity feed. 🙏🏻

[ozilog]

Thank you for the awesome video. I have learned so much from you. Please make a small app for us all to Learn better

[priyankakugapriya]

Thank you for the great video. Will this method be applicable for react native for windows as well?

[cinimodmil]

Hello Mash! Really great series! Is there any way to introduce a tab bar badge for material top tab navigator? Been trying to google for it but everything just shows bottom tabs.

[a]

Thank you for the great video.
But I have a problem
when i reload program and using TopTabNavigator, my emulator shows this problem
"If you want to use Reanimated 2 then go through our installation steps"
how to solve it ?
thank for your helping

[vishalyadav]

sir how can we add tabBarBadge in MaterialTop Tabs Navigation for notifications count V-6.x

[ahmadalastal]

I don't have android folder !, I am running the expo project not the CLI one, any help ?

[realtorBG]

is it the same this video for EXPO as well

[subhashkiran]

Hi, Can you please tell us
how to hide MaterialBottomTabs in particular screen?

[subhashkiran]

For ios, the screen is covered with top notch. how to add top tabs below notch display.

[gadhirajuvaraprasad]

how can i use both top and bottom tabs together?