software-mansion / software-mansion/react-native-screens
[iOS] Swiping back before page mount freezes the app
Open
@kkafar is already working on this.
Since Jul 13, 2023.
platform:ios
repro-provided
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 714
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 71
Description
Description
- Navigating to and immediately out(using ios native swipe back action) of a page freezes the app.
- ❗Important:
swipe backaction should be done when the target page is mounting- Let's say you have Page1 and from there you can navigate to an inner Page2. In this case, your target page is Page2.
- With Expo SDK 49, when you put the app to the background and reopen it, the bug somehow goes away (you can see it in the attached video or reproduce it with the given example)
- But with Expo SDK 48, you should kill the app and reopen it in order for the bug to go away.
📜 History
- Initially, I discovered the bug in one of my projects (expo managed workflow). Medium sized.
- Thought it was caused by one of the custom components used in the page.
- But even after stripping the whole page and just leaving the bare react-native components, we were able to reproduce the bug:
import { View } from 'react-native'; const OrderStringing = () => { return ( <View style={{ flex: 1, justifyContent: 'flex-start' }} ></View> ); }; export default OrderStringing; - ✅ I did research quite a while and seen some similar issues both here and in expo.
- However, was not able to find a suitable work-around as most of them covered unique react-native cli cases.
- As the bug appears to be easily reproducible even with a fresh
npx create-expo-appproject, I think it is important to be addressed
Steps to reproduce
- I provided a link to a minimal reproducible example. You can refer to the README.md inside the repo and follow the steps to set up your environment.
- Make sure to use a physical device.
- (In my case, I used:
iPhone 13 Pro, iOS 16.5.1and upgraded my Expo Go to the latest version that supportsSDK 49)
- (In my case, I used:
- Start the app. You should see a HomeScreen with a title:
Overviewand two buttons in the middle. - Click on
Go to Extrobutton which should take you to the Detail Page. - From there, swipe back to navigate back to the HomeScreen. ⚠️ Do not use back button on the header!
-
@@@ Make sure to swipe back while the Detail Page is sliding from the right @@@
-
- With this, you should be able to reproduce the bug 🐞.
- I will also attach a visual example below (just to make it easier and faster for you to understand and reproduce 😎)
- Feel free to ask for any help with reproduction and/or bug 😉:
reproduction_video.mp4.zip
Snack or a link to a repository
https://github.com/isik-dev/ios-swipe-back-bug
Screens version
3.22.0
React Native version
0.72.1
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Expo managed workflow
Architecture
Paper (Old Architecture)
Build type
Release mode
Device
Real device
Device model
iPhone 13 Pro (iOS 16.5.1)
Acknowledgements
Yes
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.