ionic-team / ionic-team/ionic-framework

bug: Ionic React tabs swipe back animation broken

Open
#30,191 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 14h
Merged PRs (30d)
50

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

App with routes outside tabs:
when you navigate to a route outside the tabs the ion back button works great, but using the swipe back animation doesnt show the previous page for a moment (works in ionic angular).
In the video you can see on the first try going back using the back button and then using a swipe

https://github.com/user-attachments/assets/af61c792-ef0d-42f7-bc6a-77524b4d8e3f

### Expected Behavior

Going back using the back button or by using the swipe back should work the same

### Steps to Reproduce

set app to mode "ios"
https://stackblitz.com/edit/sb1-uv8yxpms?file=src%2FApp.tsx

### Code Reproduction URL

https://stackblitz.com/edit/sb1-uv8yxpms?file=src%2FApp.tsx

### Ionic Info

"@ionic/react": "^8.4.3",
"@ionic/react-router": "^8.4.3",
"ionicons": "^7.2.2",
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4"

### Additional Information

_No response_

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproduction and its src/App.tsx in iOS mode. Compare the back-button and swipe-back transitions when navigating from tabs to an outside route. Done means both navigation methods show the previous page consistently during the back animation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.