How to reset state/history of a tab when change to another tab

Hello everyone,
Here is what I want to achieve:

I’m on Tab1 's subpage or even subpage’s subpage and I click on Tab2, here on tab change I want to reset Tab1 state/history so when I came back I want to be on Tab1 not on one of the subpages.

{
  "dependencies": {
    "@capacitor/android": "3.2.2",
    "@capacitor/app": "1.0.3",
    "@capacitor/core": "3.2.2",
    "@capacitor/haptics": "1.0.3",
    "@capacitor/ios": "^3.2.2",
    "@capacitor/keyboard": "1.0.3",
    "@capacitor/network": "^1.0.3",
    "@capacitor/push-notifications": "^1.0.4",
    "@capacitor/splash-screen": "^1.1.2",
    "@capacitor/status-bar": "1.0.3",
    "@ionic-native/fingerprint-aio": "^5.36.0",
    "@ionic-native/native-storage": "^5.36.0",
    "@ionic-native/qr-scanner": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic/react": "^5.7.0",
    "@ionic/react-router": "^5.7.0",
    "@ionic/storage": "^3.0.6",
    "aes256": "^1.1.0",
    "cordova-plugin-fingerprint-aio": "^4.0.2",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-qrscanner": "^3.0.1",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "es6-promise-plugin": "^4.2.2",
    "i18next": "^20.4.0",
    "i18next-resources-to-backend": "^1.0.0",
    "ionicons": "^5.4.0",
    "jetifier": "^2.0.0",
    "node-sass": "^6.0.1",
    "qrcode.react": "^1.0.1",
    "react": "^17.0.1",
    "react-circular-progressbar": "^2.0.4",
    "react-dom": "^17.0.1",
    "react-hook-form": "^7.15.0",
    "react-i18next": "^11.11.4",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "recheck-clientjs-library": "^1.0.22-beta.5",
    "swiper": "^6.8.4"
  },
  "devDependencies": {
    "@capacitor/cli": "3.1.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/qrcode.react": "^1.0.2",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-json": "^3.0.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2",
    "prettier-eslint": "^13.0.0",
    "typescript": "^4.1.3"
  }
}

Ionic:

   Ionic CLI       : 6.17.1 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.7.0

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : 3.2.2
   @capacitor/core    : 3.2.2
   @capacitor/ios     : 3.2.2

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.4.1) : 1.4.0

System:

   NodeJS : v16.3.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/bin/node)
   npm    : 7.21.1
   OS     : macOS Big Sur

Thanks in advance!

1 Like

You seem to have made up your mind, and I’m probably unlikely to change it, but as a user, I would urge you not to do this.

I often think of tabs as rooms in a house. I’m only in one room at a time, and stuff that I do in the kitchen should have zero impact on what the bedroom or bathroom look like. If I run into the living room for a while, and then return to the kitchen, I would find it very disorienting if everything I had put out on the counter was back in the pantry.

If your actual app doesn’t map cleanly onto that wireframe, then I would look for an alternative UI to tabs.

1 Like

This app is for company I’m working this is what we need.
I want to do this for settings page with sub pages for different things.

For example it’s same on CoinMarketccap app except they are hiding TabBar on sub pages.
Maybe I will do it to in order to achieve what I want.


Assuming there’s some sort of breadcrumb trail that allows the user to climb up the descent into subpages of settings (which would seem necessary in any case, even if you don’t agree with me about how to manage the tabs), I would just leave the currently active setting subpage exactly as it is if the user changed tabs away from settings entirely, so that the next time they choose the settings tab again (during this same app run, of course: there wouldn’t be any need to preserve the “current settings subpage” across an app quit and restart), they go right back to where they were.

Incidentally, while I’m at it, I would suggest using WebCrypto instead of whatever you’re using that aes256 library for. It’ll be more secure and likely more performant.