Whenever I swipe between pages, my application displays animation twice while clicking (routerLink, useIonRouter) works as expected. My page headers show in the wrong order when I swipe forward. For example, in router stack a, b, c when I swipe back from c to a and scroll forward to c, the page header may display b’s or a’s and be stuck right there.
Another issue is that the page moves as many as I swipe. It is too sensitive that I only swipe 1 cm can lead to more than 3 pages moving.
Is there a way to disable swiping? If not, is there a way to limit swiping pages? For example, only swipe 1 page even when I swipe from the most left to the most right.
I am using @ionic/react@6.0.8 and @ionic/react-router@6.0.8:
"dependencies": {
"@capacitor/app": "1.0.0",
"@capacitor/camera": "1.0.0",
"@capacitor/core": "3.0.0",
"@capacitor/filesystem": "1.0.0",
"@capacitor/haptics": "1.0.0",
"@capacitor/keyboard": "1.0.0",
"@capacitor/storage": "1.0.0",
"@ionic-native/camera": "5.36.0",
"@ionic-native/clipboard": "5.36.0",
"@ionic-native/core": "5.36.0",
"@ionic-native/firebase": "5.36.0",
"@ionic/pwa-elements": "3.1.1",
"@ionic/react": "^6.0.8",
"@ionic/react-router": "^6.0.8",
"@ionic/react-test-utils": "0.2.1",
"@molteni/export-csv": "0.0.8",
"@react-google-maps/api": "2.2.0",
"@reduxjs/toolkit": "1.5.1",
"@testing-library/jest-dom": "5.16.1",
"@testing-library/react": "12.1.2",
"@testing-library/react-hooks": "7.0.2",
"@testing-library/user-event": "13.5.0",
"@types/deep-equal": "1.0.1",
"@types/jest": "26.0.20",
"@types/node": "12.19.15",
"@types/prettier": "2.2.3",
"@types/react": "16.14.3",
"@types/react-dom": "16.9.10",
"@types/react-geocode": "0.2.0",
"@types/react-redux": "7.1.16",
"@types/react-router": "5.1.11",
"@types/react-router-dom": "5.1.7",
"@types/react-test-renderer": "17.0.1",
"@types/redux-mock-store": "1.0.3",
"@types/styled-components": "5.1.9",
"@types/uuid": "8.3.3",
"connected-react-router": "6.9.1",
"cordova-clipboard": "1.3.0",
"cordova-plugin-camera": "5.0.2",
"cordova-plugin-firebase": "2.0.5",
"d3": "7.0.0",
"deep-equal": "1.1.1",
"env-cmd": "10.1.0",
"eslint": "7.26.0",
"fake-indexeddb": "3.1.7",
"firebase": "9.5.0",
"formik": "2.2.9",
"generate-avatar": "1.4.10",
"hash-wasm": "4.9.0",
"history": "4.0.0",
"husky": "6.0.0",
"ionicons": "5.4.0",
"lint-staged": "11.0.0",
"prettier": "2.3.0",
"promise-all-settled-polyfill": "0.1.2",
"query-string": "7.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-error-boundary": "3.1.3",
"react-error-overlay": "6.0.9",
"react-geocode": "0.2.3",
"react-image-lightbox": "5.1.4",
"react-redux": "7.2.4",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"react-test-renderer": "17.0.2",
"redux": "4.1.0",
"redux-mock-store": "1.5.4",
"styled-components": "5.3.0",
"typescript": "4.5.4",
"uuid": "8.3.2",
"web-vitals": "0.2.4",
"workbox-background-sync": "5.1.4",
"workbox-broadcast-update": "5.1.4",
"workbox-cacheable-response": "5.1.4",
"workbox-core": "5.1.4",
"workbox-expiration": "5.1.4",
"workbox-google-analytics": "5.1.4",
"workbox-navigation-preload": "5.1.4",
"workbox-precaching": "5.1.4",
"workbox-range-requests": "5.1.4",
"workbox-routing": "5.1.4",
"workbox-strategies": "5.1.4",
"workbox-streams": "5.1.4"
},
The following is a part of my routers (wrapped by IonReactRouter in another component):
<IonTabs>
<IonRouterOutlet>
{ListOfRoute.map((route) => {
const props = { ...route, key: route.path, exact: !route.path.includes(':') };
return route.isPublic ? <Route {...props} /> : <RoutePrivate {...props} />;
})}
<Route path="/" component={RouteAction} exact />
<Route component={Default} />
</IonRouterOutlet>
<IonTabBar
slot="bottom"
style={{
'--border': '1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.05))))',
}}
>
{ListOfTabRoute.map(({ path, icon }) => {
return (
<IonTabButton key={path} tab={path} href={path} layout="label-hide">
<IonIcon icon={icon} />
<IonLabel>{path}</IonLabel>
</IonTabButton>
);
})}
</IonTabBar>
</IonTabs>
1 post - 1 participant