Merge branch '@mbert/docs-badges' into @mbert/docs-badges-versions

Author: m-bert

packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx

@@ -221,7 +221,7 @@ averageTouches: boolean | SharedValue<boolean>;
 
 Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen). This modifier allows that behavior to be changed to the one that is default on iOS - the averaged position of all active pointers will be used to calculate the translation values.
 
-<HeaderWithBadges platforms={['iOS']}>
+<HeaderWithBadges platforms={['iOS', 'web']}>
 ### enableTrackpadTwoFingerGesture
 </HeaderWithBadges>
 

packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx

@@ -5,19 +5,27 @@ import styles from './styles.module.css';
 import clsx from 'clsx';
 
 type HeaderWithBadgesProps = {
-  platforms?: ('android' | 'iOS' | 'web')[];
+  platforms: string[];
   version?: string;
   children?: React.ReactNode;
 };
 
+type Platform = 'android' | 'ios' | 'web';
+
 type PlatformBadgeProps = {
-  platform: 'android' | 'iOS' | 'web';
+  platform: Platform;
 };
 
 type VersionBadgeProps = {
   version: string;
 };
 
+const platformNameMap: Record<Platform, string> = {
+  android: 'Android',
+  ios: 'iOS',
+  web: 'Web',
+};
+
 export function VersionBadge({ version }: VersionBadgeProps) {
   const { colorMode } = useColorMode();
   const isDark = colorMode === 'dark';
@@ -35,16 +43,27 @@ export function VersionBadge({ version }: VersionBadgeProps) {
 }
 
 export function PlatformBadge({ platform }: PlatformBadgeProps) {
-  const platformBadge =
-    platform === 'android'
-      ? styles.androidBadge
-      : platform === 'iOS'
-        ? styles.iosBadge
-        : platform === 'web'
-          ? styles.webBadge
-          : {};
+  let platformBadgeStyle;
+
+  switch (platform) {
+    case 'android':
+      platformBadgeStyle = styles.androidBadge;
+      break;
+    case 'ios':
+      platformBadgeStyle = styles.iosBadge;
+      break;
+    case 'web':
+      platformBadgeStyle = styles.webBadge;
+      break;
+    default:
+      platformBadgeStyle = {};
+  }
 
-  return <div className={clsx(styles.badge, platformBadge)}>{platform}</div>;
+  return (
+    <div className={clsx(styles.badge, platformBadgeStyle)}>
+      {platformNameMap[platform]}
+    </div>
+  );
 }
 
 export default function HeaderWithBadges({
@@ -57,7 +76,8 @@ export default function HeaderWithBadges({
       {children}
 
       {platforms
-        ?.sort()
+        ?.map((platform) => platform.toLowerCase() as Platform)
+        .sort()
         .map((platform) => (
           <PlatformBadge key={platform} platform={platform} />
         ))}

packages/docs-gesture-handler/src/components/HeaderWithBadges/styles.module.css

@@ -15,7 +15,7 @@
 }
 
 .androidBadge {
-  background-color: #0f8142;
+  background-color: #34a853;
 }
 
 .iosBadge {

packages/react-native-gesture-handler/apple/RNGestureHandler.h

@@ -85,6 +85,7 @@
 @property (nonatomic) BOOL dispatchesReanimatedEvents;
 @property (nonatomic, weak, nullable) RNGHUIView *hostDetectorView;
 @property (nonatomic, nullable, assign) NSNumber *virtualViewTag;
+@property (nonatomic, copy, nullable) NSNumber *viewTag;
 
 - (BOOL)isViewParagraphComponent:(nullable RNGHUIView *)view;
 - (nonnull RNGHUIView *)chooseViewForInteraction:(nonnull UIGestureRecognizer *)recognizer;

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

@@ -262,6 +262,8 @@ - (void)bindToView:(RNGHUIView *)view
 
   [recognizerView addGestureRecognizer:self.recognizer];
   [self bindManualActivationToView:recognizerView];
+
+  self.viewTag = view.reactTag;
 }
 
 - (void)unbindFromView
@@ -271,6 +273,7 @@ - (void)unbindFromView
 
   self.hostDetectorView = nil;
   self.virtualViewTag = nil;
+  self.viewTag = nil;
 
   [self unbindManualActivation];
 }

packages/react-native-gesture-handler/apple/RNGestureHandlerManager.h

@@ -42,4 +42,6 @@
 - (nullable RNGestureHandler *)handlerWithTag:(nonnull NSNumber *)handlerTag;
 
 - (nullable RNGHUIView *)viewForReactTag:(nonnull NSNumber *)reactTag;
+
+- (void)reattachHandlersIfNeeded;
 @end

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

@@ -171,6 +171,21 @@ - (void)attachGestureHandler:(nonnull NSNumber *)handlerTag
   }
 
   [_attachRetryCounter removeObjectForKey:viewTag];
+  [self maybeBindHandler:handlerTag toViewWithTag:viewTag withActionType:actionType withHostDetector:hostDetector];
+}
+
+// Resolves a view tag to its native UIView (including contentView unwrapping),
+// sets reactTag, and binds the gesture handler to it. No-op if the handler is
+// already attached to the correct view.
+- (void)maybeBindHandler:(nonnull NSNumber *)handlerTag
+           toViewWithTag:(nonnull NSNumber *)viewTag
+          withActionType:(RNGestureHandlerActionType)actionType
+        withHostDetector:(nullable RNGHUIView *)hostDetector
+{
+  RNGHUIView *view = [_viewRegistry viewForReactTag:viewTag];
+  if (view == nil || view.superview == nil) {
+    return;
+  }
 
   // I think it should be moved to RNNativeViewHandler, but that would require
   // additional logic for setting contentView.reactTag, this works for now
@@ -181,12 +196,17 @@ - (void)attachGestureHandler:(nonnull NSNumber *)handlerTag
     }
   }
 
+  RNGestureHandler *handler = [_registry handlerWithTag:handlerTag];
+
+  // Already attached to the correct native view, nothing to do.
+  if (handler != nil && handler.recognizer.view == view && handler.actionType == actionType) {
+    return;
+  }
+
   view.reactTag = viewTag; // necessary for RNReanimated eventHash (e.g. "42onGestureHandlerEvent"), also will be
                            // returned as event.target
 
   [_registry attachHandlerWithTag:handlerTag toView:view withActionType:actionType withHostDetector:hostDetector];
-
-  // register view if not already there
   [self registerViewWithGestureRecognizerAttachedIfNeeded:view];
 }
 
@@ -224,6 +244,24 @@ - (id)handlerWithTag:(NSNumber *)handlerTag
   return [_registry handlerWithTag:handlerTag];
 }
 
+- (void)reattachHandlersIfNeeded
+{
+  // Re-bind handlers to their current native views. On Fabric, when a parent view has
+  // display:none and siblings change, the native UIView backing a component may be recycled
+  // and replaced. maybeBindHandler is a no-op if the view is nil or unchanged. This is only
+  // needed for handlers using the old api.
+  for (RNGestureHandler *handler in _registry.handlers.objectEnumerator) {
+    if (handler.viewTag == nil || [handler usesNativeOrVirtualDetector]) {
+      continue;
+    }
+
+    [self maybeBindHandler:handler.tag
+             toViewWithTag:handler.viewTag
+            withActionType:handler.actionType
+          withHostDetector:nil];
+  }
+}
+
 #pragma mark Root Views Management
 
 - (void)registerViewWithGestureRecognizerAttachedIfNeeded:(RNGHUIView *)childView

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

@@ -171,18 +171,21 @@ - (void)flushOperations
 {
   // On the new arch we rely on `flushOperations` for scheduling the operations on the UI thread.
   // On the old arch we rely on `uiManagerWillPerformMounting`
-  if (_operations.count == 0) {
-    return;
-  }
-
   RNGestureHandlerManager *manager = [RNGestureHandlerModule handlerManagerForModuleId:_moduleId];
-  NSArray<GestureHandlerOperation> *operations = _operations;
-  _operations = [NSMutableArray new];
+
+  if (_operations.count > 0) {
+    NSArray<GestureHandlerOperation> *operations = _operations;
+    _operations = [NSMutableArray new];
+
+    [self.viewRegistry_DEPRECATED addUIBlock:^(RCTViewRegistry *viewRegistry) {
+      for (GestureHandlerOperation operation in operations) {
+        operation(manager);
+      }
+    }];
+  }
 
   [self.viewRegistry_DEPRECATED addUIBlock:^(RCTViewRegistry *viewRegistry) {
-    for (GestureHandlerOperation operation in operations) {
-      operation(manager);
-    }
+    [manager reattachHandlersIfNeeded];
   }];
 }
 

packages/react-native-gesture-handler/apple/RNGestureHandlerRegistry.h

@@ -21,4 +21,6 @@
 - (void)dropHandlerWithTag:(nonnull NSNumber *)handlerTag;
 - (void)dropAllHandlers;
 
+@property (nonatomic, readonly, nonnull) NSDictionary<NSNumber *, RNGestureHandler *> *handlers;
+
 @end

packages/react-native-gesture-handler/apple/RNGestureHandlerRegistry.m

@@ -22,6 +22,11 @@ - (instancetype)init
   return self;
 }
 
+- (NSDictionary<NSNumber *, RNGestureHandler *> *)handlers
+{
+  return _handlers;
+}
+
 - (RNGestureHandler *)handlerWithTag:(NSNumber *)handlerTag
 {
   return _handlers[handlerTag];