[Android][New Arch] Buttons inside Animated.View with translate are not clickable

[delphinebugner]

Description

On my app, I have buttons inside Animated Views that translate up. Right after the translation finished, the pressable action of the button is not executed on click. If we execute another action (ex. navigating on an other tab and come back), the pressable action is executed on click.

This is what we see on the repro below:

Additional notes:

• New Arch + Android only
• On real device only, not on emulator (😅 really weird)
• Pressable and Buttons have the same error
• Pressable and Buttons variable opacity are triggered when we click the first time; only the onPress callback is'nt triggered
• On an animated view with only a variable opacity, no error; it's linked to the translation operation

Code

Code looks like this:

export const AnimatedButton = () => {
  const shiftAmount = useSharedValue(-100);
  const shiftDownStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: shiftAmount.value }],
  }));

  if (shiftAmount.value !== 0) {
    shiftAmount.value = withTiming(0, { duration: 450 });
  }

  return (
    <Animated.View style={shiftDownStyle}>
      <Button
        title="Press me"
        onPress={() => Alert.alert("Im clicked")} // 🚨 not triggered the first time
      />
    </Animated.View>
  );

A full example can be found here: https://github.com/delphinebugner/repro

Further notes

Thanks for working on the lib 🙂

If the problem is linked to a messy Reanimated usage in the component, happy to correct my code!

Steps to reproduce

On the repro application:

1. Run it on a real device (error does not occur on emulator)
2. Just after mounting the Home, try to clic on a "Press me" button : nothing happens 🚨
3. Click on "Explore" Tab
4. Return to "Home" Tab
5. Click on a "Press me" button: an alert shows up ✅
6. Click on the "Toggle animated buttons" to unmount-remount them
7. Click again a "Press me" button: nothing happens 🚨

Snack or a link to a repository

https://github.com/delphinebugner/repro

Reanimated version

3.16.1

React Native version

0.75.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Samsung Galaxy S22

Acknowledgements

Yes

[hamdij0maa]

+1

[JoaoMosmann]

I had a similar problem. To fix it I had to use the Pressable component exported by the react-native-gesture-handler library.