Twitter Top Tabs Navigation with Expo Router

Learn to create the X Top Tabs Navigation with Expo Router in React Native! We will set up a Material Top Tabs interface and navigate around just like in the X/Twitter app.

#############################

❤️ You can also find me on:

#############################

Chapters:
00:00 Intro
00:48 Basic Routing Setup
07:49 Building Material Top Tabs
19:18 Outro

#reactnative
#expo
#appdevelopment

[galaxies_dev]

Join Galaxies.dev today - the Home of the Best React Native content🚀

[Iamtheinevitable]

Would be really nice to see a tutorial on hiding top bars on scroll in a virtualized list

[bubble]

Interesting would be to have the collapsing of the top tabs when scrolling a flashlist.

[Flash]

Awesome tutorial. Honestly, I think this should be added to the Expo Router documentation. Top tabs are fairly common in apps.

[willdunertm]

Happy new year! Love this video, it would be amazing more videos showing how to make cool stuff from famous apps <3

[skinnyr]

Really useful video Simon, great job! thanks

[Giovanne-Tarcitano]

This implementation is causing a crash in Expo SDK 51, possibly due to the V3 of expo-router. On SDK 49 it was working as a charm

[EverrynN]

17:04 yo what are those sounds
Thank you for the tutorial btw

[manaspaul]

Would love to see some challenges. Like recreating the

YouTube player which has the gradient in the background based on the video output.

[aconime]

Great stuff, thanks for showing this!

[zacharyzheng]

Good job! I appreciate that, however I think you done the the header like x but not footer

[vishalbhati]

Nice, I often face issue with RN env for some reason, if you find time can you create a video on proper env set up?

[AnkurRathi-brfj]

What about top navigation with bottom Tab stack from expo also.

[Am-rrhu]

What is the pack name for like you type and you can see the code or error

[muhamotto]

What is harder and would like to see how to render top tabs dynamically! because i am struggeling with that specially for rtl! i get the toptabs but the indicator is not following with the layout when using rtl!!! its driving me crazy!

[Giovanne-Tarcitano]

This implementation is causing a crash in Expo SDK 51, possibly due to the V3 of expo-router. On SDK 49 it was working as a charm. Do you have any updates to make it work with v3?

[rtl]

Good stuff! But how can I get the "swipeable" tabs with bottom tab navigation? react-native-tab-view appears to have an option to move the tabs to the bottom but I can't find that option on Material top tabs.

[RakeshVishwakarma-jc]

Hi Simon

My understanding for ionic gives you the benefit to write cross platform application eg: (web, android or IOS), Now am looking forward on react do we have similar benefits with react as well where I can code once and deploy for any platform I am really excited to understand the in depth differences between ionic and react and as far in terms of career perspective should I continue with ionic or react ?

[rayharil]

can the top bar disappear when scrolling ?

[Nayco.o]

Please a video on how to put splash screen with expo router in the case we have an authentication setup 🥹