`Animated.View` breaks RN's Touchables when inside `forwardRef`'s render function

[latekvo]

Description

When Animated.View is either the root element, or an n+1 child (2nd, 3rd) of the root in a component created using forwardRef, the very first native interactive element is disabled, no longer calling onPress callbacks.

derived from this issue: https://github.com/software-mansion/react-native-gesture-handler/issues/3223

invalid behaviour	inspection of the invalid behaviour

Reproduction code

Expected behaviour example

```jsx import React, { forwardRef, useCallback } from 'react'; import Animated from 'react-native-reanimated'; import { Text, I18nManager, StyleSheet, TouchableOpacity, View, } from 'react-native'; interface SwipeableMethods { close: () => void; openLeft: () => void; openRight: () => void; reset: () => void; } const Example = forwardRef((_props, _ref) => { const leftElement = useCallback( () => ( { console.log('press left'); }}> Left ), [] ); const rightElement = useCallback( () => ( { console.log('press right'); }}> Right ), [] ); return ( {leftElement()} {rightElement()} ); }); export default Example; ```

Invalid behaviour, left element non-interactive, `Animated.View` wrapping the right element

```jsx import React, { forwardRef, useCallback } from 'react'; import Animated from 'react-native-reanimated'; import { Text, I18nManager, StyleSheet, TouchableOpacity, View, } from 'react-native'; interface SwipeableMethods { close: () => void; openLeft: () => void; openRight: () => void; reset: () => void; } const Example = forwardRef((_props, _ref) => { const leftElement = useCallback( () => ( { console.log('press left'); }}> Left ), [] ); const rightElement = useCallback( () => ( { console.log('press right'); }}> Right ), [] ); return ( {leftElement()} {rightElement()} ); }); export default Example; ```

Invalid behaviour, left element non-interactive, `Animated.View` is the root element

```jsx import React, { forwardRef, useCallback } from 'react'; import Animated from 'react-native-reanimated'; import { Text, I18nManager, StyleSheet, TouchableOpacity, View, } from 'react-native'; interface SwipeableMethods { close: () => void; openLeft: () => void; openRight: () => void; reset: () => void; } const Example = forwardRef((_props, _ref) => { const leftElement = useCallback( () => ( { console.log('press left'); }}> Left ), [] ); const rightElement = useCallback( () => ( { console.log('press right'); }}> Right ), [] ); return ( {leftElement()} {rightElement()} ); }); export default Example; ```

Expected behaviour, `Animated.View` wrapping the left element

```jsx import React, { forwardRef, useCallback } from 'react'; import Animated from 'react-native-reanimated'; import { Text, I18nManager, StyleSheet, TouchableOpacity, View, } from 'react-native'; interface SwipeableMethods { close: () => void; openLeft: () => void; openRight: () => void; reset: () => void; } const Example = forwardRef((_props, _ref) => { const leftElement = useCallback( () => ( { console.log('press left'); }}> Left ), [] ); const rightElement = useCallback( () => ( { console.log('press right'); }}> Right ), [] ); return ( {leftElement()} {rightElement()} ); }); export default Example; ```

Steps to reproduce

1. Run the provided examples in either the rngh or the rea example apps, in place of the empty example

Snack or a link to a repository

https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/empty/EmptyExample.tsx

Reanimated version

3.16.2

React Native version

0.74.1

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Real device, emulator

Device model

Xiaomi POCO X3 Pro, Pixel 3a emulator

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?