Simplify VirtualDetector/InterceptingGestureDetector and reduce the number of renders

[j-piasecki]

Description

The communication logic between VirtualDetector/InterceptingGestureDetector was complex, since it was passing callbacks through ref and everything else through state via context.

Since we're relying on Reanimated's useEvent and useComposedEventHandler, we need to trigger a rerender anyway to update the handler. This means there's no point in trying to optimize passing callbacks via refs, as we need to end with a render, and synchronizing renders and state updates requires additional logic.

This PR simplifies the communication layer to pass everything through the state, which should greatly simplify logic.

It also:

• changes behavior of shouldUseReanimated, dispatchesAnimatedEvents flags - now it checks every virtual gesture, where previously the last registered one was the deciding factor
• explicitly disables auto-memoization for VirtualDetector so that children changes can be detected - this should be changed to use MutationObserver once it's rolled out in RN
• adds manual memoization to InterceptingGestureDetector

Test plan

Tested on the following snippet:

import * as React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import {
  GestureDetector,
  InterceptingGestureDetector,
  useTap,
} from 'react-native-gesture-handler';

import { COLORS } from './colors';

function TextWithTap() {
  const tap = useTap({
    onStart: () => {
      'worklet';
      console.log('Tapped on text in its own component!');
    },
  });

  return (
    <GestureDetector gesture={tap}>
      <Text style={{ fontSize: 24, color: COLORS.KINDA_GREEN }}>
        This text is rendered in a separate component.
      </Text>
    </GestureDetector>
  );
}

function NativeDetectorExample() {
  const [entireVisible, setEntireVisible] = React.useState(true);
  const [firstVisible, setFirstVisible] = React.useState(true);
  const [secondVisible, setSecondVisible] = React.useState(true);
  const [thirdVisible, setThirdVisible] = React.useState(true);
  const [secondKey, setSecondKey] = React.useState(0);
  const [firstHasCallback, setFirstHasCallback] = React.useState(true);

  const tapAll = useTap({
    onStart: () => {
      'worklet';
      console.log('Tapped on text!');
    },
  });

  const tapFirstPart = useTap({
    onStart: firstHasCallback
      ? () => {
          'worklet';
          console.log('Tapped on first part!');
        }
      : () => {
          'worklet';
          console.log('First part tapped, but no callback set.');
        },
  });

  const tapSecondPart = useTap({
    onStart: () => {
      'worklet';
      console.log('Tapped on second part!');
    },
  });

  return (
    <View style={styles.subcontainer}>
      <Button
        title={(firstVisible ? 'Hide' : 'Show') + ' entire text'}
        onPress={() => setEntireVisible((v) => !v)}
      />
      <Button
        title={(firstVisible ? 'Hide' : 'Show') + ' first part'}
        onPress={() => setFirstVisible((v) => !v)}
      />
      <Button
        title={(secondVisible ? 'Hide' : 'Show') + ' second part'}
        onPress={() => setSecondVisible((v) => !v)}
      />
      <Button
        title={(thirdVisible ? 'Hide' : 'Show') + ' third part'}
        onPress={() => setThirdVisible((v) => !v)}
      />

      <Button
        title="Re-mount second part"
        onPress={() => setSecondKey((k) => k + 1)}
      />
      <Button
        title={
          (firstHasCallback ? 'Disable' : 'Enable') + ' callback on first text'
        }
        onPress={() => setFirstHasCallback((v) => !v)}
      />

      {entireVisible && (
        <InterceptingGestureDetector gesture={tapAll}>
          <Text style={{ fontSize: 18, textAlign: 'center' }}>
            Some text example running with RNGH
            {firstVisible && (
              <GestureDetector gesture={tapFirstPart}>
                <Text style={{ fontSize: 24, color: COLORS.NAVY }}>
                  {' '}
                  try tapping on this part
                </Text>
              </GestureDetector>
            )}
            {secondVisible && (
              <GestureDetector gesture={tapSecondPart}>
                <Text
                  key={secondKey}
                  style={{ fontSize: 28, color: COLORS.KINDA_BLUE }}>
                  {' '}
                  or on this part
                </Text>
              </GestureDetector>
            )}
            {thirdVisible && (
              <>
                {' '}
                <TextWithTap />
              </>
            )}{' '}
            this part is not special :(
          </Text>
        </InterceptingGestureDetector>
      )}
    </View>
  );
}

export default function NativeTextExample() {
  return (
    <View style={styles.container}>
      <NativeDetectorExample />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  subcontainer: {
    flex: 1,
    gap: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    fontSize: 18,
    textAlign: 'center',
    paddingHorizontal: 24,
  },
});

[m-bert]

LGTM, though I'll leave approval for @akwasniewski as he is the author of VirtualDetector 😅