[iOS] Gestures don't work on child transformed out of the parent bounds when it originally fit inside them

[j-piasecki]

Description

Reanimated not committing non-layout changes to the shadow tree may break gestures on components outside parents (among other things). Here: https://github.com/facebook/react-native/blob/b8f3f919cc9ebbd086d9ac79c93fffd532c55b09/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L620 the insets wouldn't be updated since layout will be skipped.

Content from the original RNGH issue:

Description

When gesture detector is attached to a view A which has a child B which may be transformed, if the child starts fully inside the bounds of its parent, the gestures will not work on the child when it's moved outside the bounds. When the child doesn't fit inside the parent's bounds, the gesture will work on it when moved further away.

Child fits fully inside parent's bounds:

Screen.Recording.2024-12-18.at.13.37.00.mov

Child extends out of the parent's bounds

Screen.Recording.2024-12-18.at.13.37.18.mov

Steps to reproduce

See the videos, Reanimated used in repro: 3.16.1

Snack or a link to a repository

https://gist.github.com/j-piasecki/102a4d821059ae2bb4313207425d09f1

Gesture Handler version

2.20.2

React Native version

0.76.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[j-piasecki]

I always knew Gesture Handler wouldn't do anything like this. Adding margin: isPressed.value ? 0.01 : 0, to the animated styles fixes the problem by forcing Reanimated to commit its changes to the shadow tree.

Case closed.

[j-piasecki]

I've been informed I can transfer issues between repos 🤯