Swipe to go back gesture on IOS web jitters

[BajajGirik]

Current behavior

To reproduce this effect, you will need to run this snack on an IOS Simulator or an actual Iphone

Note: If you want to run this project locally, you will need to manually install "react-native-web": "~0.18.9", "react-dom": "18.1.0" packages

If we try to run this project on IOS safari (using an emulator or an actual Iphone) and try to use the swipe to go back gesture, we can see that the animation jitters most of the times. As soon as I lift the finger to let the screen slide, the screen continues to slide to the right, but near the end the screen moves a little left and it causes a jittery effect and doesn't look good.

Here's the video showing this effect as well:

Screen.Recording.2023-03-29.at.11.41.49.AM.mov

(Look at the end of the video where the effect is clearly visible)

Expected behavior

The animation should complete smoothly and there shouldn't be a flicker on the device when it completes.

Reproduction

https://snack.expo.dev/@bg2010/gesture-react-native

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

package	version
react	18.1.0
react-dom	18.1.0
react-native	0.70.5
react-native-web	~0.18.9
@react-navigation/native	~6.1.6
@react-navigation/stack	~6.3.16
react-native-safe-area-context	4.4.1
react-native-screens	~3.18.0
react-native-gesture-handler	~2.8.0
react-native-reanimated	~2.12.0

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.0.13, latest: 6.1.6)
• @react-navigation/stack (found: 6.3.2, latest: 6.3.16)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.0.13, latest: 6.1.6)
• @react-navigation/stack (found: 6.3.2, latest: 6.3.16)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[BajajGirik]

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Yes, the issue still exists after upgrading the packages.
Also, edited the issue to match the latest package versions

[BajajGirik]

UPDATE:

Here's a finding that may help debug the issue faster...
Adding TransitionSpec with animation duration: 0 fixes the issue but this stops the go back animation via button click.

Here is a sample App.js file which solves the gesture swipe issue by trading of the pop animation on the back button click

(You can compare this file with the App.js file in the snack link used to repro the bug to look at the changes...)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { CardStyleInterpolators, createStackNavigator } from '@react-navigation/stack';
import Details from './components/Details';
import Home from './components/Home';
import { Easing } from 'react-native';

const StackNav = createStackNavigator();

export const IOSTransitionSpec = {
  animation: "timing",
  config: {
    duration: 300,
    easing: Easing.bezier(0.2833, 0.99, 0.31833, 0.99)
  }
};

export const IOSTransitionSpecNone = {
  animation: "timing",
  config: {
    duration: 0,
    easing: Easing.bezier(0.2833, 0.99, 0.31833, 0.99)
  }
};

export default function App() {
  return (
      <NavigationContainer linking={{enabled: true }}>
        <StackNav.Navigator
          initialRouteName="Home"
          screenOptions={{
            headerStyle: {
              backgroundColor: "blue",
              boxShadow: "none"
            },
            headerTintColor: "white",
            headerTitleStyle: {
              fontSize: 19,
              marginLeft: 5
            },
            transitionSpec: {
                open: IOSTransitionSpec,
                close: IOSTransitionSpecNone
            },
            animationEnabled: true,
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
          }}
        >
            <StackNav.Screen
              name="Home"
              component={Home}
            />
            <StackNav.Screen
              name="Details"
              component={Details}
            />
        </StackNav.Navigator>
      </NavigationContainer>
  );
}

My guess is that the swipeGesture animation is conflicting with the default transition that happens but this needs to be confirmed.