Add simultaneous

Author: m-bert

apps/common-app/src/e2e_screens/relations/Simultaneous.tsx

@@ -0,0 +1,84 @@
+import { useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  GestureDetector,
+  usePanGesture,
+  useSimultaneousGestures,
+} from 'react-native-gesture-handler';
+
+import TestingScreen from '../TestingScreen';
+import { CallbackIDs } from '../utils';
+
+export default function SimultaneousScreen() {
+  const [text, setText] = useState('');
+
+  const pan1Callbacks = useRef(new Set<string>());
+  const pan2Callbacks = useRef(new Set<string>());
+
+  const pan1Gesture = usePanGesture({
+    onBegin: () => {
+      pan1Callbacks.current.add(CallbackIDs.onBegin);
+    },
+    onActivate: () => {
+      pan1Callbacks.current.add(CallbackIDs.onActivate);
+    },
+    onUpdate: () => {
+      pan1Callbacks.current.add(CallbackIDs.onUpdate);
+    },
+    onDeactivate: () => {
+      pan1Callbacks.current.add(CallbackIDs.onDeactivate);
+    },
+    onFinalize: () => {
+      pan1Callbacks.current.add(CallbackIDs.onFinalize);
+    },
+    runOnJS: true,
+  });
+
+  const pan2Gesture = usePanGesture({
+    onBegin: () => {
+      pan2Callbacks.current.add(CallbackIDs.onBegin);
+    },
+    onActivate: () => {
+      pan2Callbacks.current.add(CallbackIDs.onActivate);
+    },
+    onUpdate: () => {
+      pan2Callbacks.current.add(CallbackIDs.onUpdate);
+    },
+    onDeactivate: () => {
+      pan2Callbacks.current.add(CallbackIDs.onDeactivate);
+    },
+    onFinalize: () => {
+      pan2Callbacks.current.add(CallbackIDs.onFinalize);
+    },
+    runOnJS: true,
+  });
+
+  const g = useSimultaneousGestures(pan1Gesture, pan2Gesture);
+
+  return (
+    <TestingScreen
+      text={text}
+      buttonCallback={() => {
+        const pan1CallbacksText = Array.from(pan1Callbacks.current).join('');
+        const pan2CallbacksText = Array.from(pan2Callbacks.current).join('');
+
+        setText(`{Pan1: ${pan1CallbacksText}, Pan2: ${pan2CallbacksText}}`);
+
+        pan1Callbacks.current.clear();
+        pan2Callbacks.current.clear();
+      }}>
+      <GestureDetector gesture={g}>
+        <View style={styles.gestureBox} testID="simultaneous-box" />
+      </GestureDetector>
+    </TestingScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  gestureBox: {
+    width: 120,
+    height: 120,
+    borderRadius: 20,
+    backgroundColor: '#4ecdc4',
+  },
+});

apps/common-app/src/e2e_screens/utils.ts

@@ -7,6 +7,7 @@ export const TestScreens = {
   Rotation: '[E2E] Rotation',
   Competing: '[E2E] Competing',
   Exclusive: '[E2E] Exclusive',
+  Simultaneous: '[E2E] Simultaneous',
 };
 
 export const CallbackIDs = {

apps/common-app/src/new_api/index.tsx

@@ -7,6 +7,7 @@ import RotationE2E from '../e2e_screens/gestures/Rotation';
 import TapE2E from '../e2e_screens/gestures/Tap';
 import CompetingE2E from '../e2e_screens/relations/Competing';
 import ExclusiveE2E from '../e2e_screens/relations/Exclusive';
+import SimultaneousE2E from '../e2e_screens/relations/Simultaneous';
 import { TestScreens } from '../e2e_screens/utils';
 import EmptyExample from '../empty';
 import CameraExample from './complicated/camera';
@@ -154,6 +155,7 @@ export const NEW_EXAMPLES: ExamplesSection[] = [
       { name: TestScreens.Fling, component: FlingE2E },
       { name: TestScreens.Competing, component: CompetingE2E },
       { name: TestScreens.Exclusive, component: ExclusiveE2E },
+      { name: TestScreens.Simultaneous, component: SimultaneousE2E },
     ],
   },
 ];

apps/expo-example/e2e/__tests__/all.test.ts

@@ -6,6 +6,7 @@ import { rotationTests } from '../suites/gestures/rotation';
 import { tapTests } from '../suites/gestures/tap';
 import { competingTests } from '../suites/relations/competing';
 import { exclusiveTests } from '../suites/relations/exclusive';
+import { simultaneousTests } from '../suites/relations/simultaneous';
 
 tapTests();
 pinchTests();
@@ -15,3 +16,4 @@ rotationTests();
 panTests();
 competingTests();
 exclusiveTests();
+simultaneousTests();

apps/expo-example/e2e/__tests__/all_wo_argent.test.ts

@@ -4,10 +4,12 @@ import { panTests } from '../suites/gestures/pan';
 import { tapTests } from '../suites/gestures/tap';
 import { competingTests } from '../suites/relations/competing';
 import { exclusiveTests } from '../suites/relations/exclusive';
+import { simultaneousTests } from '../suites/relations/simultaneous';
 
 tapTests();
 flingTests();
 longPressTests();
 panTests();
 competingTests();
 exclusiveTests();
+simultaneousTests();

apps/expo-example/e2e/__tests__/relations/simultaneous.test.ts

@@ -0,0 +1,3 @@
+import { simultaneousTests } from '../../suites/relations/simultaneous';
+
+simultaneousTests();

apps/expo-example/e2e/suites/relations/simultaneous.ts

@@ -0,0 +1,25 @@
+// eslint-disable-next-line import-x/no-extraneous-dependencies
+import { beforeAll, describe } from '@jest/globals';
+import { by, element, expect } from 'detox';
+
+import { CB, navigateTo, TestScreens } from '../../utils';
+
+export function simultaneousTests() {
+  describe('test simultaneous gestures', () => {
+    beforeAll(async () => {
+      await navigateTo(TestScreens.Simultaneous);
+    });
+
+    const gestureBox = element(by.id('simultaneous-box'));
+    const stateIndicator = element(by.id('state-indicator'));
+    const extractButton = element(by.id('extract-button'));
+
+    test('Should activate both pan gestures on swipe', async () => {
+      await gestureBox.swipe('right', 'fast');
+      await extractButton.tap();
+      await expect(stateIndicator).toHaveText(
+        `{Pan1: ${CB.B}${CB.A}${CB.U}${CB.D}${CB.F}, Pan2: ${CB.B}${CB.A}${CB.U}${CB.D}${CB.F}}`
+      );
+    });
+  });
+}