fix(react): swipe to go back gesture works on ios

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -25,6 +25,8 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
   context!: React.ContextType<typeof RouteManagerContext>;
   ionRouterOutlet?: React.ReactElement;
   routerOutletElement: HTMLIonRouterOutletElement | undefined;
+  prevProps?: StackManagerProps;
+  skipTransition: boolean;
 
   stackContextValue: StackContextState = {
     registerIonPage: this.registerIonPage.bind(this),
@@ -39,6 +41,8 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
     this.transitionPage = this.transitionPage.bind(this);
     this.handlePageTransition = this.handlePageTransition.bind(this);
     this.id = generateId('routerOutlet');
+    this.prevProps = undefined;
+    this.skipTransition = false;
   }
 
   componentDidMount() {
@@ -50,7 +54,13 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
   }
 
   componentDidUpdate(prevProps: StackManagerProps) {
-    if (this.props.routeInfo.pathname !== prevProps.routeInfo.pathname || this.pendingPageTransition) {
+    const { pathname } = this.props.routeInfo;
+    const { pathname: prevPathname } = prevProps.routeInfo;
+
+    if (pathname !== prevPathname) {
+      this.prevProps = prevProps;
+      this.handlePageTransition(this.props.routeInfo);
+    } else if (this.pendingPageTransition) {
       this.handlePageTransition(this.props.routeInfo);
       this.pendingPageTransition = false;
     }
@@ -187,34 +197,119 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
     const canStart = () => {
       const config = getConfig();
       const swipeEnabled = config && config.get('swipeBackEnabled', routerOutlet.mode === 'ios');
-      if (swipeEnabled) {
-        return this.context.canGoBack();
-      } else {
-        return false;
-      }
+      if (!swipeEnabled) { return false; }
+
+      const { routeInfo } = this.props;
+
+      const propsToUse = (this.prevProps && this.prevProps.routeInfo.pathname === routeInfo.pushedByRoute) ? this.prevProps.routeInfo : { pathname: routeInfo.pushedByRoute || '' } as any;
+      const enteringViewItem = this.context.findViewItemByRouteInfo(propsToUse, this.id);
+
+      return !!enteringViewItem;
     };
 
-    const onStart = () => {
-      this.context.goBack();
+    const onStart = async () => {
+      const { routeInfo } = this.props;
+
+      const propsToUse = (this.prevProps && this.prevProps.routeInfo.pathname === routeInfo.pushedByRoute) ? this.prevProps.routeInfo : { pathname: routeInfo.pushedByRoute || '' } as any;
+      const enteringViewItem = this.context.findViewItemByRouteInfo(propsToUse, this.id);
+      const leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id);
+
+      /**
+       * When the gesture starts, kick off
+       * a transition that is controlled
+       * via a swipe gesture.
+       */
+      if (enteringViewItem && leavingViewItem) {
+        await this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back', true);
+      }
+
+      return Promise.resolve();
     };
+    const onEnd = (shouldContinue: boolean) => {
+      if (shouldContinue) {
+        this.skipTransition = true;
+
+        this.context.goBack();
+      } else {
+        /**
+         * In the event that the swipe
+         * gesture was aborted, we should
+         * re-hide the page that was going to enter.
+         */
+        const { routeInfo } = this.props;
+
+        const propsToUse = (this.prevProps && this.prevProps.routeInfo.pathname === routeInfo.pushedByRoute) ? this.prevProps.routeInfo : { pathname: routeInfo.pushedByRoute || '' } as any;
+        const enteringViewItem = this.context.findViewItemByRouteInfo(propsToUse, this.id);
+
+        if (enteringViewItem?.ionPageElement !== undefined) {
+          const { ionPageElement } = enteringViewItem;
+          ionPageElement.setAttribute('aria-hidden', 'true');
+          ionPageElement.classList.add('ion-page-hidden');
+        }
+      }
+    }
+
     routerOutlet.swipeHandler = {
       canStart,
       onStart,
-      onEnd: (_shouldContinue) => true,
+      onEnd
     };
   }
 
   async transitionPage(
     routeInfo: RouteInfo,
     enteringViewItem: ViewItem,
-    leavingViewItem?: ViewItem
+    leavingViewItem?: ViewItem,
+    direction?: 'forward' | 'back',
+    progressAnimation = false
   ) {
+    const runCommit = async (enteringEl: HTMLElement, leavingEl?: HTMLElement) => {
+      const skipTransition = this.skipTransition;
+
+      /**
+       * If the transition was handled
+       * via the swipe to go back gesture,
+       * then we do not want to perform
+       * another transition.
+       *
+       * We skip adding ion-page or ion-page-invisible
+       * because the entering view already exists in the DOM.
+       * If we added the classes, there would be a flicker where
+       * the view would be briefly hidden.
+       */
+      if (skipTransition) {
+        /**
+         * We need to reset skipTransition before
+         * we call routerOutlet.commit otherwise
+         * the transition triggered by the swipe
+         * to go back gesture would reset it. In
+         * that case you would see a duplicate
+         * transition triggered by handlePageTransition
+         * in componentDidUpdate.
+         */
+        this.skipTransition = false;
+      } else {
+        enteringEl.classList.add('ion-page');
+        enteringEl.classList.add('ion-page-invisible');
+      }
+
+      await routerOutlet.commit(enteringEl, leavingEl, {
+        deepWait: true,
+        duration: skipTransition || directionToUse === undefined ? 0 : undefined,
+        direction: directionToUse,
+        showGoBack: !!routeInfo.pushedByRoute,
+        progressAnimation,
+        animationBuilder: routeInfo.routeAnimation,
+      });
+    }
+
     const routerOutlet = this.routerOutletElement!;
 
-    const direction =
+    const routeInfoFallbackDirection =
       routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root'
         ? undefined
         : routeInfo.routeDirection;
+    const directionToUse = direction ?? routeInfoFallbackDirection;
 
     if (enteringViewItem && enteringViewItem.ionPageElement && this.routerOutletElement) {
       if (
@@ -238,26 +333,12 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
         }
       } else {
         await runCommit(enteringViewItem.ionPageElement, leavingViewItem?.ionPageElement);
-        if (leavingViewItem && leavingViewItem.ionPageElement) {
+        if (leavingViewItem && leavingViewItem.ionPageElement && !progressAnimation) {
           leavingViewItem.ionPageElement.classList.add('ion-page-hidden');
           leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
         }
       }
     }
-
-    async function runCommit(enteringEl: HTMLElement, leavingEl?: HTMLElement) {
-      enteringEl.classList.add('ion-page');
-      enteringEl.classList.add('ion-page-invisible');
-
-      await routerOutlet.commit(enteringEl, leavingEl, {
-        deepWait: true,
-        duration: direction === undefined ? 0 : undefined,
-        direction: direction as any,
-        showGoBack: !!routeInfo.pushedByRoute,
-        progressAnimation: false,
-        animationBuilder: routeInfo.routeAnimation,
-      });
-    }
   }
 
   render() {

packages/react-router/test-app/cypress/integration/swipe-to-go-back.js

@@ -5,13 +5,119 @@ describe('Swipe To Go Back', () => {
     This spec tests that swipe to go back works
   */
 
-  it('/swipe-to-go-back, ', () => {
+  it('should swipe and abort', () => {
     cy.visit(`http://localhost:${port}/swipe-to-go-back`);
     cy.ionPageVisible('main');
+
     cy.ionNav('ion-item', 'Details');
     cy.ionPageVisible('details');
     cy.ionPageHidden('main');
-    cy.ionSwipeToGoBack(true);
+
+    cy.ionSwipeToGoBack(false, 'ion-router-outlet#swipe-to-go-back');
+    cy.ionPageVisible('details');
+    cy.ionPageHidden('main');
+  });
+
+  it('should swipe and go back', () => {
+    cy.visit(`http://localhost:${port}/swipe-to-go-back`);
     cy.ionPageVisible('main');
+
+    cy.ionNav('ion-item', 'Details');
+    cy.ionPageVisible('details');
+    cy.ionPageHidden('main');
+
+    cy.ionSwipeToGoBack(true, 'ion-router-outlet#swipe-to-go-back');
+    cy.ionPageVisible('main');
+  });
+
+  it('should swipe and abort within a tab', () => {
+    cy.visit(`http://localhost:${port}/tabs/tab1`);
+    cy.ionPageVisible('tab1');
+
+    cy.get('#child-one').click();
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab1child1');
+
+    cy.ionSwipeToGoBack(false, 'ion-tabs ion-router-outlet');
+
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab1child1')
+  });
+
+  it('should swipe and go back within a tab', () => {
+    cy.visit(`http://localhost:${port}/tabs/tab1`);
+    cy.ionPageVisible('tab1');
+
+    cy.get('#child-one').click();
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab1child1');
+
+    cy.ionSwipeToGoBack(true, 'ion-tabs ion-router-outlet');
+
+    cy.ionPageVisible('tab1');
+    cy.ionPageDoesNotExist('tab1child1')
+  });
+
+  it('should swipe and go back to correct tab after switching tabs', () => {
+    cy.visit(`http://localhost:${port}`);
+    cy.ionPageVisible('home');
+
+    cy.get('#go-to-tabs').click();
+    cy.ionPageHidden('home');
+    cy.ionPageVisible('tab1');
+    cy.ionPageVisible('tabs');
+
+    cy.get('#child-one').click();
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab1child1');
+
+    cy.get('ion-tab-button#tab-button-tab2').click();
+    cy.ionPageVisible('tab2');
+    cy.ionPageHidden('tab1child1');
+
+    cy.get('ion-tab-button#tab-button-tab1').click();
+    cy.ionPageVisible('tab1child1');
+    cy.ionPageHidden('tab2');
+
+    cy.ionSwipeToGoBack(true, 'ion-tabs ion-router-outlet');
+
+    cy.ionPageVisible('tab1');
+    cy.ionPageDoesNotExist('tab1child1');
+
+    cy.ionSwipeToGoBack(true, 'ion-tabs ion-router-outlet');
+    cy.ionPageVisible('home');
+    cy.ionPageDoesNotExist('tabs');
   });
+
+  it('should be able to swipe back from child tab page after visiting', () => {
+    cy.visit(`http://localhost:${port}/tabs/tab1`);
+    cy.ionPageVisible('tab1');
+
+    cy.get('#child-one').click();
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab1child1');
+
+    cy.get('#child-two').click();
+    cy.ionPageHidden('tab1child1');
+    cy.ionPageVisible('tab1child2');
+
+    cy.ionSwipeToGoBack(true, 'ion-tabs ion-router-outlet');
+
+    cy.ionPageDoesNotExist('tab1child2');
+    cy.ionPageVisible('tab1child1');
+
+    cy.ionSwipeToGoBack(true, 'ion-tabs ion-router-outlet');
+
+    cy.ionPageDoesNotExist('tab1child1');
+    cy.ionPageVisible('tab1');
+
+    cy.get('#child-one').click();
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab1child1');
+
+    cy.ionSwipeToGoBack(true, 'ion-tabs ion-router-outlet');
+
+    cy.ionPageDoesNotExist('tab1child1');
+    cy.ionPageVisible('tab1');
+  })
 });

packages/react-router/test-app/cypress/support/commands.js

@@ -102,7 +102,7 @@ Cypress.Commands.add('ionMenuNav', (contains) => {
 
 Cypress.Commands.add('ionTabClick', (tabText) => {
   // TODO: figure out how to get rid of this wait. Switching tabs after a forward nav to a details page needs it
-  cy.wait(250);
+  cy.wait(500);
   cy.contains('ion-tab-button', tabText).click({ force: true });
   // cy.get('ion-tab-button.tab-selected').contains(tabText)
 });
@@ -126,4 +126,4 @@ Cypress.Commands.add('ionMenuClick', () => {
 
 Cypress.Commands.add('ionHardwareBackEvent', () => {
   cy.document().trigger('backbutton');
-});
+});

packages/react-router/test-app/src/App.tsx

@@ -1,4 +1,4 @@
-import { IonApp, setupIonicReact } from '@ionic/react';
+import { IonApp, setupIonicReact, IonRouterOutlet } from '@ionic/react';
 import React from 'react';
 import { Route } from 'react-router-dom';
 
@@ -43,21 +43,23 @@ const App: React.FC = () => {
   return (
     <IonApp>
       <IonReactRouter>
-        <Route path="/" component={Main} exact />
-        <Route path="/routing" component={Routing} />
-        <Route path="/dynamic-routes" component={DynamicRoutes} />
-        <Route path="/multiple-tabs" component={MultipleTabs} />
-        <Route path="/dynamic-tabs" component={DynamicTabs} />
-        <Route path="/nested-outlet" component={NestedOutlet} />
-        <Route path="/nested-outlet2" component={NestedOutlet2} />
-        <Route path="/replace-action" component={ReplaceAction} />
-        <Route path="/tab-context" component={TabsContext} />
-        <Route path="/outlet-ref" component={OutletRef} />
-        <Route path="/swipe-to-go-back" component={SwipeToGoBack} />
-        <Route path="/dynamic-ionpage-classnames" component={DynamicIonpageClassnames} />
-        <Route path="/tabs" component={Tabs} />
-        <Route path="/tabs-secondary" component={TabsSecondary} />
-        <Route path="/refs" component={Refs} />
+        <IonRouterOutlet>
+          <Route path="/" component={Main} exact />
+          <Route path="/routing" component={Routing} />
+          <Route path="/dynamic-routes" component={DynamicRoutes} />
+          <Route path="/multiple-tabs" component={MultipleTabs} />
+          <Route path="/dynamic-tabs" component={DynamicTabs} />
+          <Route path="/nested-outlet" component={NestedOutlet} />
+          <Route path="/nested-outlet2" component={NestedOutlet2} />
+          <Route path="/replace-action" component={ReplaceAction} />
+          <Route path="/tab-context" component={TabsContext} />
+          <Route path="/outlet-ref" component={OutletRef} />
+          <Route path="/swipe-to-go-back" component={SwipeToGoBack} />
+          <Route path="/dynamic-ionpage-classnames" component={DynamicIonpageClassnames} />
+          <Route path="/tabs" component={Tabs} />
+          <Route path="/tabs-secondary" component={TabsSecondary} />
+          <Route path="/refs" component={Refs} />
+        </IonRouterOutlet>
       </IonReactRouter>
     </IonApp>
   );

packages/react-router/test-app/src/pages/Main.tsx

@@ -14,7 +14,7 @@ interface MainProps {}
 
 const Main: React.FC<MainProps> = () => {
   return (
-    <IonPage>
+    <IonPage data-pageid="home">
       <IonHeader>
         <IonToolbar>
           <IonTitle>Main</IonTitle>
@@ -58,6 +58,9 @@ const Main: React.FC<MainProps> = () => {
           <IonItem routerLink="/Refs">
             <IonLabel>Refs</IonLabel>
           </IonItem>
+          <IonItem routerLink="/tabs" id="go-to-tabs">
+            <IonLabel>Tabs</IonLabel>
+          </IonItem>
         </IonList>
       </IonContent>
     </IonPage>