formSheet + back navigation gesture is navigating, but twice

[RohovDmytro]

Description

Starting a back gesture on Android putting a finger on a backdrop of a formSheet leads to double navigation.

First time the navigation starts due to finger touching the backdrop.
Second time navigation happens due to actual back gesture being performed.

Steps to reproduce

1. https://github.com/RohovDmytro/react-native-screams

2. Open Example "formsheet-nav-back"

3. Swipe from the top left edge on Android.

Snack or a link to a repository

https://github.com/RohovDmytro/react-native-screams

Screens version

4.7.0-beta.4

React Native version

0.76.7

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Google Pixel 7

Acknowledgements

Yes

[RohovDmytro]

Ugly workaround.

/**
 * @production
 *
 * 1000 ms will be the amount of time that will take to wait to prevent. We cannot make
 * it indefinite as this will block the hardware back button indefinitely.
 *
 * If user will start a back gesture and will release finger after this period
 * the bug will be preserved.
 *
 * 99%+ of swiped should be done within the first 1000ms.
 *
 * @refs
 * https://github.com/software-mansion/react-native-screens/issues/2668#issuecomment-2646422538
 */
export const useNavWorkaround = () => {
  const navigation = useNavigation();

  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', () => {
      const cb = BackHandler.addEventListener('hardwareBackPress', () => {
        cb.remove();
        return true;
      });

      setTimeout(() => {
        cb.remove();
      }, 1000);
    });

    return () => {
      unsubscribe();
    };
  });
};