Ionic-framework: bug: @ionic/react, It shows push animation when using history.goBack()

[ArkeshGKalathiya]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
history.goBack() produces incorrect animation, IonBackButton produces correct animation.

Expected behavior:
when we navigate back using history.goBack it should show pop animation instead of push.

Steps to reproduce:
I just created blank app using ionic cli, and used code below, which contains two pages, home page and first page.

1. Open app ( which will open home page by default )
2. Go to first page
3. use back button inside first page

Related code:

APP.tsx

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import First from './pages/First';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/home" component={Home} exact={true} />
        <Route path="/first" component={First} exact={true} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

HOME.tsx

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
import React from 'react';

const Home: React.FC = (props) => {


  let goForward = ()=>{
    (props as any).history.push('/first')
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
      <IonButton onClick={goForward}>
        Go To FIRST with proper animation.
      </IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

FIRST.tsx

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
import React from 'react';

const First: React.FC = (props) => {

    let goBack = ()=>{
        (props as any).history.goBack();
    }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>First</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonButton onClick={goBack}>
            "Go Back.. with proper animation"
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

export default First;

packange.json

{
  "name": "nav-tesdt",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@ionic/react": "^4.11.0",
    "@ionic/react-router": "^4.11.0",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.12",
    "@types/react": "^16.9.5",
    "@types/react-dom": "^16.9.1",
    "@types/react-router": "^5.1.1",
    "@types/react-router-dom": "^5.1.0",
    "ionicons": "^4.6.3",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-router": "^5.1.0",
    "react-router-dom": "^5.1.0",
    "react-scripts": "3.2.0",
    "typescript": "3.6.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "description": "An Ionic project"
}

Other information:

Ionic info:

Ionic:

Ionic CLI : 5.4.2 (C:\Users\XXX\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/react 4.11.2

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.11.0 (C:\Program Files\nodejs\node.exe)
npm : 6.11.3
OS : Windows 10

[liamdebeasi]

Thanks for the issue. I am able to reproduce this. We will look into it!

[elylucas]

Hi, thanks for the issue, it should be fixed in the upcoming 4.11.3 release.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.