Implement gesture relations

[m-bert]

On hold

Caution

• Suppressed by Gesture relations #3693

Warning

• Wait for Separate Reanimated from JS #3682 to be merged

Description

Test plan

For simultaneous:

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

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

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const pan1 = useGesture('PanGestureHandler', {
    onUpdate: () => console.log('Pan 1'),
  });

  const pan2 = useGesture('PanGestureHandler', {
    onUpdate: () => console.log('Pan 2'),
  });

  const composedGesture = useSimultaneous(pan2, pan1);

  console.log(composedGesture);
  console.log(pan1.config, pan2.config);

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

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

For Exclusive:

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

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

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const tap1 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 1'),
    numberOfTaps: 1,
  });

  const tap2 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 2'),
    numberOfTaps: 2,
  });

  const tap3 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 3'),
    numberOfTaps: 3,
  });

  const composedGesture = useExclusive(tap3, tap2, tap1);

  console.log(composedGesture);
  console.log(tap1.config, tap2.config, tap3.config);

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

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

For Race:

import * as React from 'react';
import { Animated, Button, useAnimatedValue } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useSimultaneous,
  useGesture,
  useExclusive,
  useRace,
} from 'react-native-gesture-handler';

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

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const tap1 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 1'),
    numberOfTaps: 1,
  });

  const pan1 = useGesture('PanGestureHandler', {
    onEnd: (e, s) => console.log('Pan 1', s),
  });

  const composedGesture = useRace(tap1, pan1);

  console.log(composedGesture);

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

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

For composed:

import * as React from 'react';
import { Animated, Button, useAnimatedValue } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useSimultaneous,
  useGesture,
  useExclusive,
  useRace,
} from 'react-native-gesture-handler';

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

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const tap1 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 1'),
    numberOfTaps: 1,
  });

  const pan1 = useGesture('PanGestureHandler', {
    onUpdate: (e) => console.log('Pan 1'),
  });

  const pan2 = useGesture('PanGestureHandler', {
    onUpdate: (e) => console.log('Pan 2'),
  });

  const composedGesture = useExclusive(tap1, useSimultaneous(pan1, pan2));

  console.log(composedGesture);

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

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

[j-piasecki]

These could also use a different name, Type suffix is a bit misleading.

[j-piasecki]

Is there a scenario where this is ComposedGestureType?

[m-bert]

I don't think so, good catch.

[j-piasecki]

This could also use a more descriptive name.

[m-bert]

Yes, I know, I left it for now as there are some other things to do 😅

[m-bert]

Caution

• Suppressed by Gesture relations #3693

[j-piasecki]

Suppressed by #3693

I think the word you're looking for is superseded