Logic Detector

[akwasniewski]

Description

This PR implements new component -> LogicDetector. It resolves the issue of attaching gestures to inner SVG components. LogicDetector communicates with a NativeDetector higher in the hierarchy, which will be responsible for attaching gestures.

Test plan

tested on the following code

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { NativeDetector, LogicDetector, useGesture } from 'react-native-gesture-handler';

import Svg, { Circle, Rect } from 'react-native-svg';

export default function SvgExample() {
  const circleElementTap = useGesture("TapGestureHandler", {
    onStart: () => {
      'worklet';
      console.log('RNGH: clicked circle')
    }
  });
  const rectElementTap = useGesture("TapGestureHandler", {
    onStart: () => {

      'worklet';
      console.log('RNGH: clicked parallelogram')
    }
  });
  const containerTap = useGesture("TapGestureHandler", {
    onStart: () => {

      'worklet';
      console.log('RNGH: clicked container')
    }
  });
  const vbContainerTap = useGesture("TapGestureHandler", {
    onStart: () => {

      'worklet';
      console.log('RNGH: clicked viewbox container')
    }
  });
  const vbInnerContainerTap = useGesture("TapGestureHandler", {
    onStart: () => {

      'worklet';
      console.log('RNGH: clicked inner viewbox container')
    }
  });
  const vbCircleTap = useGesture("TapGestureHandler", {
    onStart: () => {
      'worklet';
      console.log('RNGH: clicked viewbox circle')
    }
  });

  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.header}>
          Overlapping SVGs with gesture detectors
        </Text>
        <View style={{ backgroundColor: 'tomato' }}>
          <NativeDetector gesture={containerTap}>
            <Svg
              height="250"
              width="250"
              onPress={() => console.log('SVG: clicked container')}>
              <LogicDetector gesture={circleElementTap}>
                <Circle
                  cx="125"
                  cy="125"
                  r="125"
                  fill="green"
                  onPress={() => console.log('SVG: clicked circle')}
                />
              </LogicDetector>
              <LogicDetector gesture={rectElementTap}>
                <Rect
                  skewX="45"
                  width="125"
                  height="250"
                  fill="yellow"
                  onPress={() => console.log('SVG: clicked parallelogram')}
                />
              </LogicDetector>
            </Svg>
          </NativeDetector>
        </View>
        <Text>
          Tapping each color should read to a different console.log output
        </Text>
      </View>
      <View style={styles.container}>
        <Text style={styles.header}>SvgView with SvgView with ViewBox</Text>
        <View style={{ backgroundColor: 'tomato' }}>
          <NativeDetector gesture={vbContainerTap}>
            <Svg
              height="250"
              width="250"
              viewBox="-50 -50 150 150"
              onPress={() => console.log('SVG: clicked viewbox container')}>
              <LogicDetector gesture={vbInnerContainerTap}>
                <Svg
                  height="250"
                  width="250"
                  viewBox="-300 -300 600 600"
                  onPress={() =>
                    console.log('SVG: clicked inner viewbox container')
                  }>
                  <Rect
                    x="-300"
                    y="-300"
                    width="600"
                    height="600"
                    fill="yellow"
                  />
                  <LogicDetector gesture={vbCircleTap}>
                    <Circle
                      r="300"
                      fill="green"
                      onPress={() => console.log('SVG: clicked viewbox circle')}
                    />
                  </LogicDetector>
                </Svg>
              </LogicDetector>
            </Svg>
          </NativeDetector>
        </View>
        <Text>The viewBox property remaps SVG's coordinate space</Text>
      </View>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 48,
  },
  header: {
    fontSize: 18,
    fontWeight: 'bold',
    margin: 10,
  },
});

[j-piasecki]

Did a fist pass, but some stuff will likely change due to #3682 :/

Anyway, you have the hardest part figured out, now it's just a matter of polishing it up.

[j-piasecki]

It's the same loop as above, and it's not modified in between. Is it needed twice?

[j-piasecki]

Suggested change

	override fun setLogicChildren(view: RNGestureHandlerDetectorView?, value: ReadableArray?) {
	view?.setLogicChildren(value)
	}
	override fun setLogicChildren(view: RNGestureHandlerDetectorView, value: ReadableArray?) {
	view.setLogicChildren(value)
	}

I think we can assume that view will not be nullable like in other methods

[j-piasecki]

Suggested change

	LogicDetector: 6,
	LOGIC_DETECTOR: 6,

[j-piasecki]

As we've talked offline - I think that childTag shouldn't be needed by events, so you should be able to get rid of Logic events, and use the existing ones instead.

[j-piasecki]

Then, you wouldn't need getNativeLogicEvent here

[j-piasecki]

This should happen before this method - in the current implementation, detectorView isn't actually a detector but whatever view the gesture is attached to.

If you move this to RNGestureHandler, can we follow the same pattern as on Android? I.e., keep a reference to the parent detector in the gesture itself? Then you wouldn't need to go through the view registry at all.

[akwasniewski]

Thanks, done in 7fb8ea9

[j-piasecki]

I'm not sure this is the way to go. Once #3682 is merged, you should be able to cleanly handle all cases in hooks it adds.

[j-piasecki]

Why detach when shouldKeepLogicChild is true?

[j-piasecki]

View under the detector can change. I'm not sure if the effect will retrigger in that case.

If not, you can try with a function ref on Wrap (<Wrap ref={(ref) => console.log(ref)} ...)

[j-piasecki]

You can try using the dom reference as a view tag - I think we are doing it already in some places.