Merge branch 'next' into @mbert/add-event-calculators

Author: m-bert

packages/react-native-gesture-handler/apple/RNGestureHandlerModule.mm

@@ -161,8 +161,9 @@ - (void)updateGestureHandlerConfig:(double)handlerTag newConfig:(NSDictionary *)
 
 - (void)configureRelations:(double)handlerTag relations:(NSDictionary *)relations
 {
-  RNGestureHandlerManager *manager = [RNGestureHandlerModule handlerManagerForModuleId:_moduleId];
-  [manager updateGestureHandlerRelations:[NSNumber numberWithDouble:handlerTag] relations:relations];
+  [self addOperationBlock:^(RNGestureHandlerManager *manager) {
+    [manager updateGestureHandlerRelations:[NSNumber numberWithDouble:handlerTag] relations:relations];
+  }];
 }
 
 - (void)dropGestureHandler:(double)handlerTag

packages/react-native-gesture-handler/src/RNGestureHandlerModule.web.ts

@@ -6,6 +6,7 @@ import type { Config, PropsRef } from './web/interfaces';
 import InteractionManager from './web/tools/InteractionManager';
 import NodeManager from './web/tools/NodeManager';
 import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
+import { GestureRelations } from './v3/types';
 
 // init method is called inside attachGestureHandler function. However, this function may
 // fail when received view is not valid HTML element. On the other hand, dropGestureHandler
@@ -37,10 +38,6 @@ export default {
       handlerTag,
       new GestureClass(new GestureHandlerWebDelegate())
     );
-    InteractionManager.instance.configureInteractions(
-      NodeManager.getHandler(handlerTag),
-      config as unknown as Config
-    );
     this.setGestureHandlerConfig(handlerTag, config as unknown as Config);
   },
   attachGestureHandler(
@@ -75,11 +72,6 @@ export default {
   },
   setGestureHandlerConfig(handlerTag: number, newConfig: Config) {
     NodeManager.getHandler(handlerTag).setGestureConfig(newConfig);
-
-    InteractionManager.instance.configureInteractions(
-      NodeManager.getHandler(handlerTag),
-      newConfig
-    );
   },
   updateGestureHandlerConfig(handlerTag: number, newConfig: Config) {
     NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
@@ -95,6 +87,12 @@ export default {
 
     NodeManager.dropGestureHandler(handlerTag);
   },
+  configureRelations(handlerTag: number, relations: GestureRelations) {
+    InteractionManager.instance.configureInteractions(
+      NodeManager.getHandler(handlerTag),
+      relations
+    );
+  },
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   flushOperations() {},
 };

packages/react-native-gesture-handler/src/handlers/createHandler.tsx

@@ -405,6 +405,16 @@ export default function createHandler<
         this.handlerTag,
         newConfig
       );
+
+      RNGestureHandlerModule.configureRelations(
+        this.handlerTag,
+        filterConfig(this.config, [
+          'waitFor',
+          'simultaneousHandlers',
+          'blocksHandlers',
+        ])
+      );
+
       scheduleFlushOperations();
     };
 

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/attachHandlers.ts

@@ -63,11 +63,12 @@ export function attachHandlers({
     for (const handler of gesturesToAttach) {
       RNGestureHandlerModule.setGestureHandlerConfig(
         handler.handlerTag,
-        filterConfig(
-          handler.config,
-          ALLOWED_PROPS,
-          extractGestureRelations(handler)
-        )
+        filterConfig(handler.config, ALLOWED_PROPS)
+      );
+
+      RNGestureHandlerModule.configureRelations(
+        handler.handlerTag,
+        extractGestureRelations(handler)
       );
     }
 

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/updateHandlers.ts

@@ -67,11 +67,12 @@ export function updateHandlers(
 
       RNGestureHandlerModule.setGestureHandlerConfig(
         handler.handlerTag,
-        filterConfig(
-          handler.config,
-          ALLOWED_PROPS,
-          extractGestureRelations(handler)
-        )
+        filterConfig(handler.config, ALLOWED_PROPS)
+      );
+
+      RNGestureHandlerModule.configureRelations(
+        handler.handlerTag,
+        extractGestureRelations(handler)
       );
 
       registerHandler(handler.handlerTag, handler, handler.config.testId);

packages/react-native-gesture-handler/src/v3/NativeDetector/HostGestureDetector.web.tsx

@@ -62,8 +62,8 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   };
 
   useEffect(() => {
-    detachHandlers(attachedNativeHandlerTags.current);
-  }, [children]);
+    propsRef.current = props;
+  }, [props]);
 
   useEffect(() => {
     if (React.Children.count(children) !== 1) {
@@ -72,14 +72,13 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
       );
     }
 
-    attachHandlers(new Set(handlerTags));
-  }, [handlerTags, children]);
+    const newHandlerTags = new Set(handlerTags);
+    attachHandlers(newHandlerTags);
 
-  useEffect(() => {
     return () => {
-      detachHandlers(attachedHandlerTags.current);
+      detachHandlers(newHandlerTags);
     };
-  }, []);
+  }, [handlerTags, children]);
 
   return (
     <View style={{ display: 'contents' }} ref={viewRef as Ref<View>}>

packages/react-native-gesture-handler/src/v3/NativeDetector/utils.ts

@@ -146,4 +146,6 @@ export function configureRelations<THandlerData, TConfig>(
       gesture.gestureRelations
     );
   }
+
+  RNGestureHandlerModule.flushOperations();
 }

packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts

@@ -94,21 +94,17 @@ export function useGesture<THandlerData, TConfig>(
   }, [type, tag]);
 
   useEffect(() => {
+    const preparedConfig = prepareConfig(config);
+    RNGestureHandlerModule.setGestureHandlerConfig(tag, preparedConfig);
+    RNGestureHandlerModule.flushOperations();
+
     bindSharedValues(config, tag);
 
     return () => {
       unbindSharedValues(config, tag);
     };
   }, [tag, config]);
 
-  useEffect(() => {
-    const preparedConfig = prepareConfig(config);
-
-    RNGestureHandlerModule.setGestureHandlerConfig(tag, preparedConfig);
-
-    RNGestureHandlerModule.flushOperations();
-  }, [config, tag]);
-
   return {
     tag,
     type,

packages/react-native-gesture-handler/src/web/tools/InteractionManager.ts

@@ -1,3 +1,4 @@
+import { GestureRelations } from '../../v3/types';
 import type IGestureHandler from '../handlers/IGestureHandler';
 import { Config, Handler } from '../interfaces';
 
@@ -11,45 +12,46 @@ export default class InteractionManager {
   // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
   private constructor() {}
 
-  public configureInteractions(handler: IGestureHandler, config: Config) {
+  public configureInteractions(
+    handler: IGestureHandler,
+    config: GestureRelations | Config
+  ) {
     this.dropRelationsForHandlerWithTag(handler.handlerTag);
 
     if (config.waitFor) {
       const waitFor: number[] = [];
-      config.waitFor.forEach((otherHandler: Handler): void => {
-        // New API reference
-        if (typeof otherHandler === 'number') {
-          waitFor.push(otherHandler);
-        } else {
-          // Old API reference
-          waitFor.push(otherHandler.handlerTag);
-        }
+      config.waitFor.forEach((otherHandler: Handler | number) => {
+        waitFor.push(
+          typeof otherHandler === 'number'
+            ? otherHandler
+            : otherHandler.handlerTag
+        );
       });
 
       this.waitForRelations.set(handler.handlerTag, waitFor);
     }
 
     if (config.simultaneousHandlers) {
       const simultaneousHandlers: number[] = [];
-      config.simultaneousHandlers.forEach((otherHandler: Handler): void => {
-        if (typeof otherHandler === 'number') {
-          simultaneousHandlers.push(otherHandler);
-        } else {
-          simultaneousHandlers.push(otherHandler.handlerTag);
-        }
+      config.simultaneousHandlers.forEach((otherHandler: Handler | number) => {
+        simultaneousHandlers.push(
+          typeof otherHandler === 'number'
+            ? otherHandler
+            : otherHandler.handlerTag
+        );
       });
 
       this.simultaneousRelations.set(handler.handlerTag, simultaneousHandlers);
     }
 
     if (config.blocksHandlers) {
       const blocksHandlers: number[] = [];
-      config.blocksHandlers.forEach((otherHandler: Handler): void => {
-        if (typeof otherHandler === 'number') {
-          blocksHandlers.push(otherHandler);
-        } else {
-          blocksHandlers.push(otherHandler.handlerTag);
-        }
+      config.blocksHandlers.forEach((otherHandler: Handler | number) => {
+        blocksHandlers.push(
+          typeof otherHandler === 'number'
+            ? otherHandler
+            : otherHandler.handlerTag
+        );
       });
 
       this.blocksHandlersRelations.set(handler.handlerTag, blocksHandlers);