GestureDetector dont working when display none

[leruse4ka]

Description

If a component's display is changed to none, GestureDetector stops working on iOS.

There was already an issue like this - #3937

Is it possible to fix this issue for v2.30?

Steps to reproduce

Copy from #3937

Steps to reproduce
In the provided Slack, here are some steps to try to see when it works and when it starts failing:

Click the blue square, see that the alert shows
Click "Hide / Show"
Click "Hide / Show again"
Click the blue square, see that the alert still shows
Click "Hide / Show"
Click "Set random views"
Click "Hide / Show" again
Click the blue square, see that no alert is shown <- BUG
A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

https://snack.expo.dev/@appandflow/moody-orange-apples

Gesture Handler version

2.30.0

React Native version

0.82.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

New Architecture (Fabric)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[m-bert]

Hi @leruse4ka!

Is it possible to fix this issue for v2.30?

We have plans to release 2.31 before Easter. I'll get back here and let you know after release!

[m-bert]

Hi again! The fix has just been released in 2.31.0 🎉

[leruse4ka]

Hi, @m-bert!
We updated to version 2.31.0, but everything is the same. If you don't store display: none, everything works fine.

Our usage:

const animatedStyles = useAnimatedStyle(() =>
    ({
      display: opacity.value ? 'flex' : 'none',
      transform: [
        {translateY: translateY.value},
        {translateX: translateX.value}
      ],
      opacity: opacity.value
    }))

<GestureDetector gesture={gesture}>
    <Animated.View style={[Styles.container,
      {width: _width},
      animatedStyles,
      isDarkMode && ApplicationStyles.whiteBackground
    ]}
    testID='snackbar'
    >
      <View style={Styles.messageContainer}>
        <View style={Styles.icon}>
          {/* @ts-expect-error */}
          {Icon ? <Icon {...iconParams} /> : null}
        </View>
        <View style={Styles.textContainer}>
          {snackbarData?.message
            ? <FText numberOfLines={2} style={[Styles.text, darkText]}>{snackbarData.message}</FText>
            : null}
          {snackbarData?.subtitle
            ? <FText numberOfLines={2} style={Styles.subtitle}>{snackbarData?.subtitle}</FText>
            : null}
        </View>
      </View>
      {snackbarData?.buttonTitle
        ? <TouchableOpacity style={[Styles.button, isDarkMode && Styles.buttonDark]}
          accessibilityLabel={snackbarData.buttonTitle}
          onPress={handleButtonPress}>
          <FText style={[Styles.buttonText, darkText]}>{snackbarData.buttonTitle}</FText>
        </TouchableOpacity>
        : null}
    </Animated.View>
  </GestureDetector>

[m-bert]

Hi @leruse4ka! Okay, I've reopened this until we make sure that it works.

Have you checked your snack? As far as I can see it works, so either there's something that I missed in my setup, or at least this one got resolved.

In provided fragment I can see that the setup is a bit different and view that changes display is not parent, but the child of the detector.

Seems the repro is not copy-pastable (e.g. there's no definition of FText), I've asked Claude to create similar example to mimic this behavior.

Here is generated code:

import { Button, StyleSheet, View } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';

export default function App() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const opacity = useSharedValue(1);

  const offsetX = useSharedValue(0);
  const offsetY = useSharedValue(0);

  const pan = Gesture.Pan()
    .onStart(() => {
      offsetX.value = translateX.value;
      offsetY.value = translateY.value;
    })
    .onUpdate((e) => {
      translateX.value = offsetX.value + e.translationX;
      translateY.value = offsetY.value + e.translationY;
    });

  const animatedStyles = useAnimatedStyle(() => ({
    display: opacity.value ? 'flex' : 'none',
    transform: [
      { translateY: translateY.value },
      { translateX: translateX.value },
    ],
    opacity: opacity.value,
  }));

  return (
    <GestureHandlerRootView style={styles.container}>
      <View style={styles.buttons}>
        <Button
          title="Toggle visibility"
          onPress={() => {
            opacity.value = withSpring(opacity.value ? 0 : 1);
          }}
        />
        <Button
          title="Reset position"
          onPress={() => {
            translateX.value = withSpring(0);
            translateY.value = withSpring(0);
          }}
        />
      </View>
      <GestureDetector gesture={pan}>
        <Animated.View style={[styles.box, animatedStyles]} testID="draggable">
          <View style={styles.innerBox} />
        </Animated.View>
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  buttons: {
    position: 'absolute',
    top: 60,
    gap: 8,
  },
  box: {
    width: 120,
    height: 120,
    backgroundColor: 'royalblue',
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  innerBox: {
    width: 40,
    height: 40,
    backgroundColor: 'white',
    borderRadius: 6,
  },
});

This one also seems to work. Would it be possible for you to create a reproduction that fails? We'll try to look into it!

Happy Easter! 🐰

[leruse4ka]

Hi @m-bert ! I will provide an example today or tomorrow evening.