Twitter Top Tabs Navigation with Expo Router
ฝัง
- เผยแพร่เมื่อ 31 ก.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
Join Galaxies.dev today - the Home of the Best React Native content🚀
We need more courses
Beautiful, thank you!!!
Would be really nice to see a tutorial on hiding top bars on scroll in a virtualized list
++ same thinking
That sounds like a nice challenge!
Really useful video Simon, great job! thanks
My pleasure!
Great stuff, thanks for showing this!
Glad you enjoyed it!
Happy new year! Love this video, it would be amazing more videos showing how to make cool stuff from famous apps
Definitely on my list - anything specific that comes to your mind?
@@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
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.
Thank you so much
Any time
Interesting would be to have the collapsing of the top tabs when scrolling a flashlist.
I know right, but they never make videos on that 😭😭😭😭😭😭😭😭
Will see what I can do!
Amazing
Thanks!
Guys which extension he is using that display the error while coding?
Amazing 🔥🔥
Thanks 🔥
love it
can the top bar disappear when scrolling ?
Excellent
Thank you so much 😀
Awesome tutorial. Honestly, I think this should be added to the Expo Router documentation. Top tabs are fairly common in apps.
Thank you! Give it a share so maybe it reaches the Expo team :)
17:04 yo what are those sounds
Thank you for the tutorial btw
🔥🔥🔥
Thanks for the support!
Good job! I appreciate that, however I think you done the the header like x but not footer
@galaxies_dev Did you encountered error in dark mode? Another stacks adapts automatically, but material top tabs doesn't reflect that change.
Haven't checked with different modes :/
How can I make the Top Tab Scroll upwards whenever I scroll up on the screen.
For example: The TH-cam 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
even i want that did you get the any solution please let me know
@@user-dj9ud6vj3j I haven't got any solution. Did u?
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?
Hey, any chance you found a solution for this? I have the same issue.
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?
Sure, will try!
Would love to see some challenges. Like recreating the
TH-cam player which has the gradient in the background based on the video output.
Oh yeah that's definitely an interesting one!
What about top navigation with bottom Tab stack from expo also.
Good point, might have to use a different component in that case :/
What is the recommended feature for the code to auto complete in the video? copilot?
Yeah I use Copilot
thank you
You are welcome!
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 ?
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
What is the pack name for like you type and you can see the code or error
Probably "Pretty TypeScript Errors"
@@galaxies_dev thanks 😊
nice
Thanks!
@@galaxies_dev please make a video on customizing header style in expo router and switch from expo router to react navigation.
This works in web? React Navigation toptabbar doesnt work in web, just mobile.
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.
I think there are other packages if you simply want swipeable segments, aren' there?
@@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.
please consider doing the same tutorial ionic and angular
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.
@@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.
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!
Please a video on how to put splash screen with expo router in the case we have an authentication setup 🥹