Filter config

[m-bert]

Description

This PR adds logic that filters config object before passing it to native side.

Test plan

Tested on the following code:

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

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

  const gesture = useTap({
    onEnd: (e) => {
      'worklet';
      console.log('tap', e.handlerData);
    },

    numberOfTaps: 2,
  });

  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>
  );
}

[j-piasecki]

I think the whitelist would be a better pick here. We could have known passable props (the configs), known unpassable props (what is currently in PropsToFilter), and we could warn about anything else.

[m-bert]

Do you mean something like

if (whitelist.has(prop)) {
  ...
} else if (PropsToFilter.has(prop)) {
  continue;
} else {
  console.warn(...)
}

?

[j-piasecki]

Basically, yes. There should be arrays of all possible values for each handler somewhere already.

[m-bert]

The problem here is that we cannot simply take specific gesture properties. Let's say we pick Pan props to be in whitelist, then, for example, mouseButton is not direct Pan property, therefore it will be ignored.

On the other hand I can see why this may be useful, so we could make list of common props, then merge them with handlers' properties 😅

[m-bert]

This one 4ff105a seems to do the job. Let me know what you think.

[m-bert]

Actually not really, I forgot that this is function which prepares config to be passed into native side. In that case some of the props are wrongly white-listed, as Pan doesn't accept for example activeOffsetX, but rather activeOffsetXStart and activeOffsetXEnd etc.

In that case I think we will have to make those lists, since they don't exist in old types.

[m-bert]

I forgot that this is function which prepares config to be passed into native side.

Okay, I've fixed that... though to get rid of circular dependencies I had to split types and hooks, so it grew quite large 🙈

Let me know what you think about this whitelist approach, and if you have any thoughts/ideas how to make it look better than it is now. Also, I'm not sure about how it will work with #3731 🙈

cc @akwasniewski

[akwasniewski]

As far as I see it won't conflict with #3731. But we'll have to test to make sure.

[m-bert]

Similar thing will be added in #3689, so we will have to find good place to keep it 😅