[Web] Adapt NativeViewGestureHandler to NativeDetector

[akwasniewski]

Description

Following #3638 this PR brings support for NativeViewGestureHandler into NativeDetector for web. It does so, by attaching handler into child instead of detector.

Test plan

Tested on the following code

import * as React from 'react';
import { StyleSheet, Text, View, ScrollView, Button } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const items = Array.from({ length: 5 }, (_, index) => `Item ${index + 1}`);
  const [enabled, setEnabled] = React.useState(true);
  const gesture = useGesture('NativeViewGestureHandler', {
    onBegin: (e) => {
      console.log('onBegin', e);
    },
    onStart: (e) => {
      console.log('onStart', e);
    }
  });

  const SV1 = () => (
    <ScrollView style={styles.scrollView1}>
      {items.map((item, index) => (
        <View key={index} style={styles.item}>
          <Text style={styles.text}>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );

  const SV2 = () => (
    <ScrollView style={styles.scrollView2}>
      {items.map((item, index) => (
        <View key={index} style={styles.item}>
          <Text style={styles.text}>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Swap the child"
        onPress={() => {
          setEnabled(!enabled);
        }}
      />
      <NativeDetector gesture={gesture}>
        {enabled ? <SV1 /> : <SV2 />}
      </NativeDetector >
    </GestureHandlerRootView >
  );
}

const styles = StyleSheet.create({
  scrollView1: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  scrollView2: {
    backgroundColor: 'lightblue',
    marginHorizontal: 20,
  },

  item: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    margin: 2,
    backgroundColor: 'white',
    borderRadius: 10,
  },
  text: {
    fontSize: 20,
    color: 'black',
  },
});

[j-piasecki]

Suggested change

	const attachTarget = shouldAttachToChild
	? childRef.current
	: viewRef.current;
	const attachTarget = shouldAttachToChild
	? viewRef.current.firstChild
	: viewRef.current;

I think viewRef.current is of type HTMLDivElement in web in this case, so we should be able to read the child (we may want to assert there is one).

[akwasniewski]

Thanks! Tried to figure out the solution without wrapping, but I did not know that on web we could just specify the view to be a div. Fixed in 1f473cd

[m-bert]

In theory it can also be SVGElement. Would it be ok to use just Element as type?

[akwasniewski]

As @j-piasecki suggested I used HTMLDivElement as only it has firstChild attribute and view on web is a div anyway. It allowed me to get rid of the wrapping. If it really can be somethng different than a div I might have to go back to wrapping. Is there a use case for an SVG element to have a native gesture? Maybe I can only typecast there, when accessing firstChild.

[m-bert]

Maybe I can only typecast there, when accessing firstChild.

If firstChild doesn't exist then type cast won't help - it won't work anyway 🤷

If it really can be something different than a div I might have to go back to wrapping.

As far as I remember svg tags inherit from SVGElement, you can check that 😅

Is there a use case for an SVG element to have a native gesture?

Probably not, this configuration doesn't sound reasonable to me (cc @j-piasecki)

[akwasniewski]

If firstChild doesn't exist then type cast won't help - it won't work anyway

Yes, but if native gesture could only be on divs I could possibly check the view type in

  const shouldAttachGestureToChildView = (handlerTag: number): boolean => {
    return RNGestureHandlerModule.getGestureHandlerNode(
      handlerTag
    ).shouldAttachGestureToChildView() && viewRef.current instanceof HTMLDivElement;
  };

and then the type cast would be safe

[m-bert]

Then you could probably use type guard and type cast wouldn't be necessary

[m-bert]

I know it works, but why do you switch to div?

[akwasniewski]

Explained in #3653 (comment)