[iOS] Unexpected Navigation Behavior When Swiping Back Quickly

[Unuuuuu]

Description

When using iOS devices with the following dependencies, swiping back quickly during stack navigation leads to unexpected behavior:

Expected behavior: stack a -> stack b -> stack c -> stack b -> stack a
Actual behavior: stack a -> stack b -> stack c -> stack b -> stack a -> stack b -> stack a
The issue occurs only when swiping back quickly. When swiping back slowly, the navigation works as expected.

Expected Behavior

expected-behavior.MP4

Actual Behavior

actual-behavior.MP4

Steps to reproduce

1. Enable fullScreenGestureEnabled in the navigation options.
2. Set up stack navigation with three screens: stack a, stack b, and stack c.
3. Navigate through the stack in order: stack a -> stack b -> stack c.
4. Swipe back quickly from stack c to stack b, and then quickly swipe back again from stack b to stack a.
5. Observe the unexpected behavior.

Snack or a link to a repository

https://github.com/Unuuuuu/react-native-screens-repro

Screens version

4.3.0

React Native version

0.76.3

Platforms

iOS

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

iphone 15 pro

Acknowledgements

Yes

[kkafar]

Hey! Thanks for reporting. Would it be the same issue as: #2454? It seems similar

[Unuuuuu]

Hey! Thanks for reporting. Would it be the same issue as: #2454? It seems similar

Thank you for checking.

I don't think it's the same issue. The issue you mentioned is that when you make a quick gesture, it gets stuck in a bad state, and what I reported is that when you make a quick gesture, it briefly goes to an unintended screen and then returns to the intended screen.

[kkafar]

Makes sense, we'll look into it

[JustJoostNL]

I have the exact same issue here. Don't think it's similar to #2454 too.

[JustJoostNL]

Is there any update on this? It's a pretty annoying bug 😕

[wvq]

@kkafar after multiple tracking native code, the problem is updateContainer may push screen which is disappered, maybe these problem is also related to react-navigation.

For example, If we have screen A,B,C,D :
swipe back twice, the right case should be:

1. viewDidDisappear calls with screen D
2. updateContainer calls , screens only remaining A,B,C
3. viewDidDisappear calls with screen C
4. updateContainer calls, screens only remaining A,B

If swiping quickly, There are two abnormal situations：

1. screen C's viewDidDisappear call before screen D's viewDidDisappear

2. screen D's viewDidDisappear called, then screen C's viewDidDisappear called,
   then updateContainer called twice, both remaining A,B,C, the screen C should not be there,
   then the controller try to call appear screen C and disapper screen C, then the screen B shows.

I see the comment in RNSScreen.mm method viewWillAppear

// TODO: Find out why this is executed when screen is going out

maybe this because the wrong screen C has been removed but still there

[berg-dee]

Has there been any development on this? It's still an issue

[stephentuso]

Is there any update here? I'd really like to switch to the new architecture - and now that it's the default with expo 53, all new apps will be experiencing this issue

[JustJoostNL]

Yeah same here, it's a really annoying UI bug. Any updates?

[wvq]

@JustJoostNL @stephentuso @berg-dee

I'm using a shell script to fixed this issue, If you don't use react-navigation's preventRemove, you can run this script after npm install.

I'm using "react-native-screens": "~4.10.0"

#!/bin/bash

# 
# Temporary solution to fix swipe issue.
#
# https://github.com/software-mansion/react-native-screens/issues/2559
#

check='disappeared'

screen_header='./node_modules/react-native-screens/ios/RNSScreen.h'
screen_mm='./node_modules/react-native-screens/ios/RNSScreen.mm'
screen_stack_mm='./node_modules/react-native-screens/ios/RNSScreenStack.mm'

if ! grep -qw $check $screen_header; then
  sed -i '' 's/(RNSScreenView \*)screenView;/(RNSScreenView *)screenView;\n@property (nonatomic, readonly) BOOL disappeared;/g' $screen_header
  echo 'RNSScreen.h hooked'
else
  echo  'RNSScreen.h already hooked, skip...'
fi

if ! grep -qw _$check $screen_mm; then
  sed -i '' 's/\[super viewWillAppear:animated\];/[super viewWillAppear:animated];\n  _disappeared = NO;/g' $screen_mm
  sed -i '' 's/\[super viewDidAppear:animated\];/[super viewDidAppear:animated];\n  _disappeared = NO;/g' $screen_mm
  sed -i '' 's/\[super viewWillDisappear:animated\];/[super viewWillDisappear:animated];\n  _disappeared = NO;/g' $screen_mm
  sed -i '' 's/\[super viewDidDisappear:animated\];/[super viewDidDisappear:animated];\n  _disappeared = YES;/g' $screen_mm

  sed -i '' 's/_fakeView = \[UIView new\];/_fakeView = [UIView new];\n    _disappeared = NO;/g' $screen_mm

  echo 'RNSScreen.mm hooked'
else
  echo  'RNSScreen.mm already hooked, skip...'
fi


if ! grep -qw $check $screen_stack_mm; then
    sed -i '' 's/\[_controller pushViewController:top animated:YES\];/if(!((RNSScreen *)top).disappeared) {\n        [_controller pushViewController:top animated:YES];\n      }/g' $screen_stack_mm
    echo 'RNSScreenStack.mm hooked'
else
  echo  'RNSScreenStack.mm already hooked, skip...'
fi

echo 'hook finish'

[stephentuso]

Thanks @wvq, I put it in a patch for patch-package or pnpm: https://gist.github.com/stephentuso/af91a8f54ff248125aacc60588ac974c

I don't use preventRemove right now, but what issue does this cause with that?