Building an Ionic React Tab Bar Navigation

[@galaxies_dev]

Want to learn more about building mobile apps as well? Check out my free Quick Start Guide: ionicacademy.com/ionic-quickstart-guide/ 🔥 Make sure to subscribe for more! kzbin.info_?sub_confirmation=1

[@darshkejriwal9333]

Stuck on this routing for a week. Found this video. You saved me!!!! Thanks for this helpful tutorial man.

[@galaxies_dev]

So happy to help!

[@kurtz1993]

Literally saved me from an issue with double animation on iOS, because my router was not setup properly! Thank you Simon!

[@galaxies_dev]

Glad I could help Luis!

[@luclekene7362]

Your the best Simon , It is because of content like yours that the ionic community cannot collapse, thank you for your content, you have no idea how much you help us ionic developers, thank you again and a lot of courage for the future💪

[@galaxies_dev]

Thank you so much for your kind words ❤️

[@victory_lucky]

This came in handy, please do you have the same project in angular?

[@galaxies_dev]

This would be it: kzbin.info/www/bejne/lXPRdIV_j5ahes0

[@oman7787]

Hi, can we see the curriculum of the new ionic react course? this is the only course I am interested in and would like to base my decision on that

[@galaxies_dev]

Send me an email to [e-mail] and I'll give you a screenshot, but it simply covers the React Ionic basics so far :)

[@robguntitan]

Hi Simon what do you prefer for Ionic apps, angular or react? Greetings from Germany :-)

[@galaxies_dev]

I am still faster with Ionic, but I start liking React as well. The result is really the same - depends on which framework you prefer!

[@alexhopkins639]

Hello Simon! Great video as usual. Just a quick queston. For example from your video. Is it possible to go from Tab1 --> Details page --> THEN go to Tab2 --> (and here is the tricky part) Then get back to Tab1 BUT now you should see not home page of the Tab1 but Details page instead (or the page you last interact with on the tab). This is very popular logic in many apps. For example you can easy observ this behavior in the GitHub iOS app. I am struggle with this for long time and i am still wondering is it possible or not with Ionic. Thank you so much in advance Simon.

[@galaxies_dev]

Usually every tab of the tab bar should keep track of it's stack and views are intentionally not destroyed - maybe your navigation triggers a reload of the root tab page instead of showing the last open page and therefore somehow destroys that nav history?

[@lucaszorzi492]

What a timming, i'm starting a project tomorrow with tab bar navigation hahah, btw love your vids, ty for all!!

[@galaxies_dev]

Awesome, hope this saved you some time Lucas!

[@vincenteliezer]

Hello champ...I love how you started doing react ionic...just requesting if you can do ionic react hardware back button. 👏👏

[@galaxies_dev]

Will add this to my list Vincent!

[@vincenteliezer]

@@galaxies_dev thank you!

[@dosss_]

Hey Simon! have you had any issues where there would be "flickering" when switching between tabs, or when opening up the "/detailsonly" page there would be a janky animation (previous page will slide across halfway, pause, and then complete)

[@galaxies_dev]

No not really, then usually something in the UI or code is off!

[@dosss_]

​@@galaxies_dev all good! I actually tried starting fresh `ionic start ionic-starter-app tabs --type="react"` and implemented the "/detailsonly" page like in the video and could reproduce the animation issues. So I'm guessing it's something to do with the latest vers. of Ionic

[@alejandrol5933]

Hey Dosss, I have a same error. Were you able to resolve the error?

[@dosss_]

@@alejandrol5933 not yet, i gave up and used a modal instead 😂 I was going to raise it as an issue to ionic repo, but i couldn’t reproduce it on a codesanbox. I’ll set some a fresh repo one time and use it as the example

[@dosss_]

@@alejandrol5933 not yet, i gave up and used a modal instead 😂 I was going to raise it as an issue to ionic repo, but i couldn’t reproduce it on a codesanbox. I’ll set some a fresh repo one time and use it as the example

[@leonardopillay4200]

Hey Simon great tutorial. Do you have any idea how to reload the tab when using the ionic tabs component in angular? When navigating and returning the data does not reset or refresh.

[@galaxies_dev]

You could probably use a different state management with RxJS in a service! Otherwise tabs are meant to be cached and therefore don't reload, it's by design!

[@leonardopillay4200]

@@galaxies_dev Thank you for the response I have been wracking my brain to see if there was a way with configuration but state management should work. With regards to navigation do you have a best practice with dealing with back navigation on web apps as this can really make a PWA frustrating? For example, while navigating in the app it remembers the history when using the back button.

[@Skalexsong]

Hey, great tutorial, just curious, what would happen if we put all the routing inside that tabs component ? so let say, the login and protected route (home, profile, etc) are inside the tabs router ? so all the URL of the apps will look like the usual website like /home, /login, /profile, not like /login, /app /app/profile, /app/settings

[@galaxies_dev]

Good question Sami, did you gave it a try? I know that for Angular the routes are children of a component and would therefore render "within" the Tabs interface, so not 100% sure how it would work for React!

[@Skalexsong]

@@galaxies_dev I got it a little buggy, not sure if I have my setup wrong or something else, so I ended up following the example from ionic itself and that's all I need, thank you for your reply :)

[@celestial8610]

this guy is awesome

[@galaxies_dev]

Than you 🙌

[@celestial8610]

@@galaxies_dev :v

[@zakirhoosen4404]

How would I build a drag and drop ionic app builder ?

[@sven_93]

do you have a smiliar video (login into tabs area) for angular?

[@galaxies_dev]

This should come close to it: kzbin.info/www/bejne/iKbYgJecr55-rsU

[@ashwini_2010]

👌

[@owenwexler7214]

I was trying to control a tab bar via a display useState in an Ionic React app and almost got away with such an anti-pattern, but there's no way to scroll to the top on switch of the tabs so if I'm scrolled down to the middle of one tab, switching tabs will get me to the middle of the new tab instead of going to the top which is horrible UX. window.scrollTo(0, 0) does not work for this since the content in question is in an which for some Godforsaken reason in Ionic is a shadow DOM under the hood, and using useRef with the element and doing a scrollToTop() does not work for the same reason (even though according to Ionic it should, yay jankiness), so I'm going to have to implement real tab navigation via React Router/Ionic clearly and hope that is doable in the context of my app and results in a better UX.

[@Philson]

Oh. Aren't you the Angular guy? Why doing React now?

[@galaxies_dev]

I'm the "build mobile apps with web tech guy" ;)