Simple example of switching tab and persist page state?

I am looking for a bare minimum simple example (Ionic 5 React w/ Typescript) of “tabs” where I can switch between tabs / pages and the previous page is untouch, meaning all variables stay there and page position is the same.

I can’t find a good example anywhere except bit and pieces from Ionic 4 and not Typescript.

you can check out starting a new project using the “tabs” template that Ionic CLI provides:

ionic start myApp --type=react tabs

That will create a simple project with tab navigation. It comes with 3 tabs and one page per tab.

If you want the state of each page to be persistent you can do it with different approaches.
One solution could be using localStorage to store the state of the pages, and retriveing it before rendering each page, with UseEffect or UseIonViewWillEnter for instance. I think this is the simplest way of doing it, but could become complicated if the project scales too much.

Other option, more sophisticated and better for large-scale projects, is using state managment, such as Redux or already built-in React Context API, for making persistent state across your app.

Hope it helped you.

1 Like