Twitter Top Tabs Navigation with Expo Router

Рет қаралды 12,368

Күн бұрын

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

Пікірлер: 59

@galaxies_dev 5 ай бұрын

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

@abdu5822 5 ай бұрын

We need more courses

@Iamtheinevitable 5 ай бұрын

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

@abdu5822 5 ай бұрын

++ same thinking

@galaxies_dev 5 ай бұрын

That sounds like a nice challenge!

@DamjansWorkshop 3 ай бұрын

Beautiful, thank you!!!

@bubble8718 5 ай бұрын

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

@Iamtheinevitable 5 ай бұрын

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

@galaxies_dev 5 ай бұрын

Will see what I can do!

@skinnyr4473 3 ай бұрын

Really useful video Simon, great job! thanks

@galaxies_dev 3 ай бұрын

My pleasure!

@aconime 3 ай бұрын

Great stuff, thanks for showing this!

@galaxies_dev 2 ай бұрын

Glad you enjoyed it!

@willdunertm5047 5 ай бұрын

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

@galaxies_dev 5 ай бұрын

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

@willdunertm5047 4 ай бұрын

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

@rtl6832 21 күн бұрын

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.

@EverrynN Ай бұрын

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

@lanskaba3668 4 ай бұрын

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

@zacharyzheng9326 5 ай бұрын

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

@uv_codes 2 ай бұрын

How can I make the Top Tab Scroll upwards whenever I scroll up on the screen. For example: The KZfaq 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 27 күн бұрын

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

@vishalbhati8974 4 ай бұрын

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 4 ай бұрын

Sure, will try!

@aabbccddef 3 ай бұрын

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

@galaxies_dev 3 ай бұрын

Yeah I use Copilot

@user-hk3zu9dz6p 4 ай бұрын

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_ 4 ай бұрын

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 5 ай бұрын

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

@galaxies_dev 5 ай бұрын

Haven't checked with different modes :/

@markpw1 3 ай бұрын

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 2 ай бұрын

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

@adilrao7777 5 ай бұрын

Amazing

@galaxies_dev 5 ай бұрын

Thanks!

@FahmiEshaq 4 ай бұрын

Excellent

@galaxies_dev 3 ай бұрын

Thank you so much 😀

@Flash136 5 ай бұрын

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

@galaxies_dev 5 ай бұрын

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

@Am-rr8hu 5 ай бұрын

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

@galaxies_dev 5 ай бұрын

Probably "Pretty TypeScript Errors"

@Am-rr8hu 4 ай бұрын

@@galaxies_dev thanks 😊

@manaspaul 5 ай бұрын

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

@galaxies_dev 5 ай бұрын

Oh yeah that's definitely an interesting one!

@cesarmerlo9999 4 ай бұрын

love it

@AnkurRathi-br9fj 2 ай бұрын

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

@galaxies_dev 2 ай бұрын

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

@pinmonnyka3093 5 ай бұрын

thank you

@galaxies_dev 5 ай бұрын

You are welcome!

@angeromeogouebi2948 5 ай бұрын

🔥🔥🔥

@galaxies_dev 5 ай бұрын

Thanks for the support!

@Riazbapoo 5 ай бұрын

please consider doing the same tutorial ionic and angular

@WarSTRIKER1299 5 ай бұрын

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 5 ай бұрын

@@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 5 ай бұрын

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 5 ай бұрын

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 5 ай бұрын

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

@Moreoverover 5 ай бұрын

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