software-mansion / software-mansion/react-native-screens

[iOS] Swiping back before page mount freezes the app

Open
#1,828 4 comments 0 reactions 1 assignee View on GitHub

@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 back action 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-app project, 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.1 and upgraded my Expo Go to the latest version that supports SDK 49)
  1. Start the app. You should see a HomeScreen with a title: Overview and two buttons in the middle.
  2. Click on Go to Extro button which should take you to the Detail Page.
  3. 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

  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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.