Bind SharedValues in handler config

[m-bert]

Description

This PR introduces SharedValue bindings to config. This will allow users to specify values in config asSharedValues, e.g:

const taps = useSharedValue(2);

const gesture = useGesture('TapGestureHandler', {
  onEnd: () => {
    console.log('Tap detected. Required number of taps:', taps.value);
    taps.set(taps.value + 1);
  },
  numberOfTaps: taps,
});

Test plan

Tested on the following code:

import * as React from 'react';
import { Animated, Button } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);
  const taps = useSharedValue(2);

  const gesture = useGesture('TapGestureHandler', {
    onEnd: () => {
      console.log('Tap detected. Required number of taps:', taps.value);
      taps.set(taps.value + 1);
    },
    numberOfTaps: taps,
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

[m-bert]

I wasn't sure if this should be done like this, or like in setGestureHandlerConfig. However, if we use addOperationBlock we have to call flushOperations, so I think we can leave it as it is (cc @j-piasecki)

[j-piasecki]

I think updateGestureHandlerHelper can be inlined in both places. Now that handlers are no longer generic classes, the helper doesn't add much, and the result should be easier to read.

[m-bert]

I agree, done in 50ffbcd

[j-piasecki]

This will cause the gesture to be dropped when the config object is changed. Shared value binding should be handled by a separate effect.

[m-bert]

Good catch, changed in 8d1ad9b

[j-piasecki]

I don't think there's a need to store shared values in a map.

[m-bert]

Done in 2af12c1

[j-piasecki]

Reanimated also numbers from 0, we need some kind of offset - pick your favorite, but not obvious (rational or rounded irrational) number. We shouldn't need that counter anyway.

[m-bert]

Reanimated also numbers from 0

Reanimated starts from 9999 😅 But I do agree that we may want to use offset.

Also, do we need to use tag + offset? If each shared value has its own map of listeners, it should be fine to use just offset and then we could simply call it listenerId.

Changed in 9a98e19, though this commit has SharedValues in array. It was removed later on in 2af12c1.

[j-piasecki]

Suggested change

	sharedValues.set(key, {
	id: nextSharedValueListenerID,
	sharedValue: maybeSharedValue,
	});

[j-piasecki]

Suggested change

nextSharedValueListenerID,

[j-piasecki]

Suggested change

nextSharedValueListenerID++;

[j-piasecki]

Suggested change

	for (const [key, { id, sharedValue }] of sharedValues.entries()) {
	Reanimated.runOnUI(() => {
	sharedValue.removeListener(id);
	})();
	sharedValues.delete(key);
	}
	for (const [key, maybeSharedValue] of Object.entries(config)) {
	if (!Reanimated.isSharedValue(maybeSharedValue)) {
	continue;
	}
	Reanimated.runOnUI(() => {
	maybeSharedValue.removeListener(handlerTag + MAGIC_OFFSET);
	})();
	}

[j-piasecki]

Suggested change

	function maybeExtractSharedValues(config: any, tag: number) {
	function bindSharedValues(config: any, tag: number) {

Imo, we don't need maybe prefix here. If there's no Reanimated, there will be no shared values - every shared value would be bound. Same, if there's Reanimated but no shared values in the config. And if there's Reanimated and shared values, they will be bound correctly.

[m-bert]

Sure, done in fd6eb79

[j-piasecki]

Suggested change

	function maybeDetachSharedValues() {
	function unbindSharedValues() {

Same

[m-bert]

Done in fd6eb79