It works really well (on SDK 52) with the bottom tabs from expo router which I learned from Simon's Airbnb tutorial. Just create a folder instead of a file in your bottom bar routing folder and follow this video.
@@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
Thanks for the tutorial, but when I add a horizontal ScrollView, Material Top Tabs doesn't work correctly and it changes screen instead of scrolling the ScrollView.
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.
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!
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
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?
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
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?
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 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.
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!
![React Native для начинающих за 2 часа [2022] ! Мобильное приложение на JavaScript](http://i.ytimg.com/vi/K-aD8ClG1FQ/mqdefault.jpg)
Join Galaxies.dev today - the Home of the Best React Native content🚀
We need more courses
It works really well (on SDK 52) with the bottom tabs from expo router which I learned from Simon's Airbnb tutorial. Just create a folder instead of a file in your bottom bar routing folder and follow this video.
Could you kindly show me some sample code of how you got it working? I been trying for ages.
@rakzfn Hi! Are you able to create bottom bars in the same way as in the Airbnb tutorial? Can you show me your bottom bar folder structure?
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!
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 :)
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
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!
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
Really useful video Simon, great job! thanks
My pleasure!
great work right there simon
Thanks mate!
What about top navigation with bottom Tab stack from expo also.
Good point, might have to use a different component in that case :/
17:04 yo what are those sounds
Thank you for the tutorial btw
Thanks for the tutorial, but when I add a horizontal ScrollView, Material Top Tabs doesn't work correctly and it changes screen instead of scrolling the ScrollView.
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!
Great stuff, thanks for showing this!
Glad you enjoyed it!
Do we have to do this in tsx? Usually my files are in jsx
Beautiful, thank you!!!
Good job! I appreciate that, however I think you done the the header like x but not footer
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!
you absolute legend!
Thank yoU!
Please a video on how to put splash screen with expo router in the case we have an authentication setup 🥹
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.
How can i do it with tabs ?
can the top bar disappear when scrolling ?
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!
What is the pack name for like you type and you can see the code or error
Probably "Pretty TypeScript Errors"
@@galaxies_dev thanks 😊
What is the recommended feature for the code to auto complete in the video? copilot?
Yeah I use Copilot
Guys which extension he is using that display the error while coding?
Amazing 🔥🔥
Thanks 🔥
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
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?
Maybe do that and share with the rest of the community?
Thank you so much
Any time
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
@@AftabShaik-r4z I haven't got any solution. Did u?
+1，I'm looking for solutions to these as well.
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.
@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 :/
This works in web? React Navigation toptabbar doesnt work in web, just mobile.
Excellent
Thank you so much 😀
Amazing
Thanks!
🔥🔥🔥
Thanks for the support!
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.
thank you
You are welcome!
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!
nice
Thanks!
@@galaxies_dev please make a video on customizing header style in expo router and switch from expo router to react navigation.
love it