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.
🔥 Build React Native apps FAST: galaxies.dev/
🔗 Tutorial on Galaxies: galaxies.dev/react-native-mat...
#############################
❤️ You can also find me on:
Twitter: / schlimmson
TikTok: / simongrimm_
Instagram: / simongrimm_
#############################
Chapters:
00:00 Intro
00:48 Basic Routing Setup
07:24 Join Galaxies.dev
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🚀

[@abdu5822]

We need more courses

[@Iamtheinevitable]

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

[@abdu5822]

++ same thinking

[@galaxies_dev]

That sounds like a nice challenge!

[@DamjansWorkshop]

Beautiful, thank you!!!

[@skinnyr4473]

Really useful video Simon, great job! thanks

[@galaxies_dev]

My pleasure!

[@aconime]

Great stuff, thanks for showing this!

[@galaxies_dev]

Glad you enjoyed it!

[@willdunertm5047]

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

[@galaxies_dev]

Definitely on my list - anything specific that comes to your mind?

[@willdunertm5047]

@@galaxies_dev I love twitter drawer features, the editing from instagram stories (stickers and drawings), or cool design systems like new discord ui or inkdrop mobile app UI

[@bubble8718]

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

[@Iamtheinevitable]

I know right, but they never make videos on that 😭😭😭😭😭😭😭😭

[@galaxies_dev]

Will see what I can do!

[@EverrynN]

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

[@Flash136]

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

[@galaxies_dev]

Thank you! Give it a share so maybe it reaches the Expo team :)

[@aymenbachiri-yh2hd]

Thank you so much

[@galaxies_dev]

Any time

[@faddalibrahim3443]

Amazing 🔥🔥

[@galaxies_dev]

Thanks 🔥

[@rtl6832]

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.

[@adilrao7777]

Amazing

[@galaxies_dev]

Thanks!

[@FahmiEshaq]

Excellent

[@galaxies_dev]

Thank you so much 😀

[@zacharyzheng9326]

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

[@manaspaul]

Would love to see some challenges. Like recreating the KZbin player which has the gradient in the background based on the video output.

[@galaxies_dev]

Oh yeah that's definitely an interesting one!

[@angeromeogouebi2948]

🔥🔥🔥

[@galaxies_dev]

Thanks for the support!

[@vishalbhati8974]

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?

[@galaxies_dev]

Sure, will try!

[@lanskaba3668]

Guys which extension he is using that display the error while coding?

[@cesarmerlo9999]

love it

[@rayharil]

can the top bar disappear when scrolling ?

[@uv_codes]

How can I make the Top Tab Scroll upwards whenever I scroll up on the screen. For example: The KZbin Channel Screen has a header, then below it a similar Top Tab Navigation Bar and then below the bar the content according to the tab of Top Tab Nav. When u scroll on that screen the content and the top tab and the header all move up

[@user-dj9ud6vj3j]

even i want that did you get the any solution please let me know

[@uv_codes]

@@user-dj9ud6vj3j I haven't got any solution. Did u?

[@pinmonnyka3093]

thank you

[@galaxies_dev]

You are welcome!

[@AnkurRathi-br9fj]

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

[@galaxies_dev]

Good point, might have to use a different component in that case :/

[@user-hk3zu9dz6p]

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 ?

[@justpatrick_]

I'd suggest react native over ionic. It also offers the cross-platform capabilities that ionic has and is more perfomant. There are also more jobs for it

[@andrzejhanusek3718]

@galaxies_dev Did you encountered error in dark mode? Another stacks adapts automatically, but material top tabs doesn't reflect that change.

[@galaxies_dev]

Haven't checked with different modes :/

[@aabbccddef]

What is the recommended feature for the code to auto complete in the video? copilot?

[@galaxies_dev]

Yeah I use Copilot

[@markpw1]

I'm struggling to get this working with dynamic routes as 'href' does not exist in type MaterialTopTabNavigationOptions. Any way to support href from Expo router? Or any work around?

[@Anes-gu4sw]

Hey, any chance you found a solution for this? I have the same issue.

[@drivekashmir7049]

nice

[@galaxies_dev]

Thanks!

[@drivekashmir7049]

@@galaxies_dev please make a video on customizing header style in expo router and switch from expo router to react navigation.

[@Am-rr8hu]

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

[@galaxies_dev]

Probably "Pretty TypeScript Errors"

[@Am-rr8hu]

@@galaxies_dev thanks 😊

[@rbasket8]

This works in web? React Navigation toptabbar doesnt work in web, just mobile.

[@Riazbapoo]

please consider doing the same tutorial ionic and angular

[@WarSTRIKER1299]

He made a video like two years ago where he built the twitter UI with Angular/Ionic. It's pretty much the same as of now, you just need to adjust the styling like colors and icons. I honestly don't get why everyone keeps commenting "Now do this or that with Angular/Ionic." Simon is a great instructor and as he already mentioned several times, that he'll do more RN related material. He isn't the only person on the internet who teaches Ionic/Angular related stuff. Also, Ionic has great documentation about their components. So it should be fairly easy to achieve the exact same result. Basic understanding of the components, angular and some basic knowledge about styling that's it. Sorry for the long comment and the harsh tone, it's nothing personal, but it's frustrating to see when people do this.

[@Riazbapoo]

@@WarSTRIKER1299 if it’s frustrating to see then close your eyes and keep scrolling. It was a simple request. He’s a grown man who is free to accept or deny the request. No idea why you’re getting worked up over a strangers comment on the internet. No one has denied that Simon is a great instructor. That’s why we watch his videos. He explains things well and knows how to get a point across. Now carry on with your day.

[@galaxies_dev]

Thank you both, and yes I have about 500+ videos on Ionic/Angular and only a fraction about React Native, that's why this is my current focus. Don't get caught up in the details and ship great apps with the tools you feel most comfortable with!

[@Moreoverover]

I find it strange that the only way to achieve swipe gestures is to use the Material Top Tabs Navigator, and then you have to very esoterically puzzle it together with Expo Router to get it working, like c'mon, the documentation should be better than this for such a common feature.

[@galaxies_dev]

I think there are other packages if you simply want swipeable segments, aren' there?

[@Moreoverover]

@@galaxies_dev Will try them out! There are some issues with some components re-rendering unfortunately with the material top tabs. Happens when you use a camera in one tab for example.

[@Nayco.o]

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