[Web] Remove `findNodeHandle` function.

[m-bert]

Description

findNodeHandle is a utility function that allows us to get native view from React component. The problem is, that under the hood it uses findDOMNode, which is deprecated and will be removed in React 19. To get rid of this function, I've written our implementation that meets our requirements.

Also, for new API we had to introduce a little trick (thanks @j-piasecki) - we add wrapper div with display: contents; style and we pass a ref to this element. With that change, it is much easier to get required HTMLElement - we simply have to get div from ref and find first child (preferably the one without display: contents;)

[!WARNING] You may find tat in StrictMode most of new API examples doesn't work. That's not really the case. If you check example from this comment it works fine. What really don't work in these examples are the animations.

Test plan

Tested that example app works and no findNodeHandle error is thrown in StrictMode

[j-piasecki]

Could you check if this still works after the changes:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';

export default function EmptyExample() {
  const [key, setKey] = React.useState(1);

  const tap = Gesture.Tap()
    .onStart(() => {
      console.log('Tapped');
      setKey((prev) => prev + 1);
    })
    .runOnJS(true);

  return (
    <View style={styles.container}>
      <GestureDetector gesture={tap}>
        <View
          style={{ width: 100, height: 100, backgroundColor: 'green' }}
          key={key}
        />
      </GestureDetector>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

[m-bert]

Could you check if this still works after the changes

Yes it does 😅