onPress not work correctly

[pigeonmal]

Description

(first i thought is bug from react-native, but after checks, is from react-native-reanimated)
I try to create my bottom sheet.
onPress work only one time, when pressable component is in root. Sometimes it's just the first time click, sometimes is after many clicks, and after does not work anymore.
onPressIn work perfectly

The bug is on v0.73.7 (new arch, bridgless false) and v0.74.0 (new arch, bridgless true), tested only on Android.

This is video of the bug:

Record_2024-04-24-22-06-44.mp4

Steps to reproduce

(TEST ON ANDROID, v0.73.7, and v0.74.0, new arch)

1. clone my reproducer
2. try building, and verify the bug

Snack or a link to a repository

https://github.com/pigeonmal/react-native-onpress-bug

Reanimated version

3.9.0

React Native version

0.74.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[v27855]

Familiar issue from my project, a few things I tried for my case:

1. My React Native version is 0.72.7, and the Reanimated version is 3.7.1. This issue only occurs on Android.
2. If I upgrade Reanimated to 3.10.*, this issue will be resolved, but it will cause another initialization issue for both iOS and Android.
3. The issue affects onPress and onLongPress, while onPressIn and onPressOut work fine, but it's not ideal to use them.
4. It is related to the Animate.View component from Reanimated. The issue is resolved if I use Animate.View from React Native instead.
5. Not related to react-native-gesture-handler (Updated from below)
6. This issue only occurs in the build version on Android.
7. Not all the Animate.View from Reanimated has this issue, only wrapped by a parent component which has position: absolute

[pigeonmal]

2. If I upgrade Reanimated to 3.10.*, this issue will be resolved, but it will cause another initialization issue for both iOS and Android.

Oh I will try to update to 3.10 for test, but what is your initialization issue ?

[v27855]

Few updates for this issue:

1. This issue only occurred on Samsung Devices, tested on Galaxy s22.
2. I updated reanimated to 3.10.0, and react-native to 0.74.1. The initialization issue disappeared. But the onPress issue still exists.
3. Found this issue on stackoverflow, which is similar case for me. Now it may related to react-native-gesture-handler.
4. The onPress event can triggered through the remote of Android Studio.

You may try using onPressIn to check is that we are same issue

Now I'm confused and hopeless on this issue, after making a big effort to upgrade the react-native and finding out it may not related to the version of reanimated.

[pigeonmal]

onPressIn work perfectly

Yes for me onPressIn work perfectly like you, so I think it's the same issue.
I try to update to 0.74.1, and reanimated to 3.11.0, and still the same issue. (I tested on android phone, not samsung). Check my reproducer https://github.com/pigeonmal/react-native-onpress-bug

[pigeonmal]

Still not work

UP

[littleski]

Have a look @ software-mansion/react-native-screens#2292.

[Ali-Aftab-Quest]

Have been facing the same problem for weeks now, anyone got a fix yet?

[pigeonmal]

Only fix for now i found is to use react native bottom sheet

[WKampel]

I'm on Android (new arch., 0.75, expo) and the onPress events don't work inside my drawer's scrollview, when scrolled. But onPressIn does work. Strange.

[macaujack]

Any update on this? I think this issue does nothing with react-native-gesture-handler and absolute position. I removed everything related with react-native-gesture-handler in my code, and I also don't set position: "absolute". The issue still exists.

After several hours of trouble-shooting, I think this issue is most likely related with react-native-reanimated.

p.s., I'm using Samsung Galaxy S22 as my test device. react-native version is 0.76.3. react-native-reanimated version is 3.16.1.

[macaujack]

However I've found a simple workaround. Whenever your animation ends (e.g., the bottom sheet is completely drawn up, or the left side drawer is completely drawn out), just perform a force re-render to the component. You only need to perform this force re-render once.

For example:

const [, forceRerender] = useState(false);
const translateX = useSharedValue(0);

const timingConfig: WithTimingConfig = useMemo(
  () => ({
    duration: 200,
    easing: Easing.bezier(0.25, 0.1, 0.25, 1),
  }),
  []
);

const openDrawer = () => {
  "worklet";
  translateX.value = withTiming(250, timingConfig, (finished) => {
    if (finished) {
      runOnJS(forceRerender)(true);
    }
  });
};

(Disclaimer: I'm new to React Native and I'm not sure if this workaround will introduce new issues)

I notice that the actual behavior of the button (or whatever pressable component) in an <Animated.View> is as following. React native seems to "remember" the "original" region of the button that can trigger an onPress. After performing an animation and applying some translation (i.e., translateX and/or translateY), if the new region has some overlap with the original region, then pressing this overlapped region will also trigger the onPress. But if the pressed point/coordinate is outside the original region, onPress won't be triggered.

When in a scenario like bottom sheet or left side drawer, the new region typically has no overlap with the original region. So the onPress is completely broken. It is impossible to be triggered.