add gesture handler on iOS

SimonLoir · Apr 23, 2024 · 26f481a · 26f481a
1 parent d516cf4
commit 26f481a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 26 deletions.
diff --git a/apps/app/components/GestureKey.tsx b/apps/app/components/GestureKey.tsx
@@ -1,5 +1,10 @@
 import { View, Text } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import {
+    Directions,
+    Gesture,
+    GestureDetector,
+    gestureHandlerRootHOC,
+} from 'react-native-gesture-handler';
 import { runOnJS, useSharedValue } from 'react-native-reanimated';
 
 type GestureKeyProps = {
@@ -9,7 +14,7 @@ type GestureKeyProps = {
     keyMargin: number;
 };
 
-export default function GestureKey({
+const GestureKey = gestureHandlerRootHOC(function GestureKey({
     keys,
     onPress,
     keyWidth,
@@ -40,7 +45,11 @@ export default function GestureKey({
     const squareKeys = Array.from(keys.keys());
 
     const fling = Gesture.Fling()
+        .direction(
+            Directions.UP | Directions.DOWN | Directions.LEFT | Directions.RIGHT
+        )
         .onBegin((event) => {
+            console.log('begin', event);
             initPosition.value = { x: event.x, y: event.y };
             finalPosition.value = null;
         })
@@ -84,18 +93,18 @@ export default function GestureKey({
         });
 
     return (
-        <View
-            className=' bg-[rgb(30,30,30)] items-center flex-col'
-            style={{
-                width: keyWidth,
-                height: height,
-                margin: keyMargin,
-                borderRadius: 15,
-            }}
-        >
-            {square.map((row, rowIndex) => {
-                return (
-                    <GestureDetector gesture={fling} key={rowIndex}>
+        <GestureDetector gesture={fling}>
+            <View
+                className=' bg-[rgb(30,30,30)] items-center flex-col'
+                style={{
+                    width: keyWidth,
+                    height: height,
+                    margin: keyMargin,
+                    borderRadius: 15,
+                }}
+            >
+                {square.map((row, rowIndex) => {
+                    return (
                         <View className='flex-row '>
                             {row.map((key, keyIndex) => {
                                 return (
@@ -149,9 +158,11 @@ export default function GestureKey({
                                 );
                             })}
                         </View>
-                    </GestureDetector>
-                );
-            })}
-        </View>
+                    );
+                })}
+            </View>
+        </GestureDetector>
     );
-}
+});
+
+export default GestureKey;
diff --git a/apps/app/ios/Podfile.lock b/apps/app/ios/Podfile.lock
@@ -1085,6 +1085,10 @@ PODS:
     - React
   - RNCAsyncStorage (1.21.0):
     - React-Core
+  - RNGestureHandler (2.14.1):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
   - RNReanimated (3.6.3):
     - glog
     - RCT-Folly (= 2022.05.16.00)
@@ -1160,6 +1164,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
   - ReactNativeUiLib (from `../../../node_modules/react-native-ui-lib`)
   - "RNCAsyncStorage (from `../../../node_modules/@react-native-async-storage/async-storage`)"
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
@@ -1290,6 +1295,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-ui-lib"
   RNCAsyncStorage:
     :path: "../../../node_modules/@react-native-async-storage/async-storage"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
@@ -1359,6 +1366,7 @@ SPEC CHECKSUMS:
   ReactCommon: 840a955d37b7f3358554d819446bffcf624b2522
   ReactNativeUiLib: e23a2b3d196aaaf561694cf76385c1ff3055bdc2
   RNCAsyncStorage: 618d03a5f52fbccb3d7010076bc54712844c18ef
+  RNGestureHandler: 25b969a1ffc806b9f9ad2e170d4a3b049c6af85e
   RNReanimated: 93b32f0705e86e267a258fd545fb754daf597dcd
   RNScreens: b582cb834dc4133307562e930e8fa914b8c04ef2
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17

diff --git a/apps/app/metro.config.js b/apps/app/metro.config.js
@@ -14,17 +14,14 @@ const config = getDefaultConfig(projectRoot);
 config.watchFolders = [monorepoRoot];
 // 2. Let Metro know where to resolve packages and in what order
 config.resolver.nodeModulesPaths = [
-  path.resolve(projectRoot, 'node_modules'),
-  path.resolve(monorepoRoot, 'node_modules'),
+    path.resolve(projectRoot, 'node_modules'),
+    path.resolve(monorepoRoot, 'node_modules'),
 ];
 
-
-if (process.env.NODE_ENV === 'production' && process.env.OS === 'Windows_NT') 
-{
-  config.server.unstable_serverRoot = projectRoot 
+if (process.env.NODE_ENV === 'production') {
+    config.server.unstable_serverRoot = projectRoot;
 }
 
 module.exports = config;
 
-
 module.exports = withNativeWind(config, { input: './global.css' });