[General] Pass testID to native side in dev (#3883)

## Description

In the past, there were cases where I needed to debug how multiple
gestures influenced each other. Identifying which gesture is which was a
bit challenging when there were multiple of the same type.

I figured, since we already have a `testID` property on each gesture, we
may as well propagate that to the native side. This should make
debugging multi-gesture configs much easier.

This is only set in development builds; the only cost in production is
one more pointer in the gesture object.

## Test plan

Verify that the test ID is set correctly on the native side.

Author: j-piasecki

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandler.kt

@@ -30,6 +30,7 @@ open class GestureHandler {
   private var trackedPointersIDsCount = 0
   private val windowOffset = IntArray(2) { 0 }
   var tag = 0
+  var testID: String? = null
   var view: View? = null
     private set
 
@@ -126,6 +127,7 @@ open class GestureHandler {
   }
 
   open fun resetConfig() {
+    testID = null
     needsPointerData = DEFAULT_NEEDS_POINTER_DATA
     manualActivation = DEFAULT_MANUAL_ACTIVATION
     shouldCancelWhenOutside = DEFAULT_SHOULD_CANCEL_WHEN_OUTSIDE
@@ -844,7 +846,7 @@ open class GestureHandler {
   open fun wantsToAttachDirectlyToView() = false
 
   override fun toString(): String {
-    val viewString = if (view == null) null else view!!.javaClass.simpleName
+    val viewString = testID ?: view?.javaClass?.simpleName
     return this.javaClass.simpleName + "@[" + tag + "]:" + viewString
   }
 
@@ -896,6 +898,9 @@ open class GestureHandler {
       if (config.hasKey(KEY_MOUSE_BUTTON)) {
         handler.mouseButton = config.getInt(KEY_MOUSE_BUTTON)
       }
+      if (config.hasKey(KEY_TEST_ID)) {
+        handler.testID = config.getString(KEY_TEST_ID)
+      }
     }
 
     abstract fun createEventBuilder(handler: T): GestureHandlerEventDataBuilder<T>
@@ -917,6 +922,7 @@ open class GestureHandler {
       private const val KEY_HIT_SLOP_HORIZONTAL = "horizontal"
       private const val KEY_HIT_SLOP_WIDTH = "width"
       private const val KEY_HIT_SLOP_HEIGHT = "height"
+      private const val KEY_TEST_ID = "testID"
 
       private fun handleHitSlopProperty(handler: GestureHandler, config: ReadableMap) {
         if (config.getType(KEY_HIT_SLOP) == ReadableType.Number) {

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

@@ -74,6 +74,7 @@
 @property (nonatomic, weak, nullable) id<RNGestureHandlerEventEmitter> emitter;
 @property (nonatomic, readonly, nullable) UIGestureRecognizer *recognizer;
 @property (nonatomic, readonly, nullable) RNGestureHandlerPointerTracker *pointerTracker;
+@property (nonatomic, nullable) NSString *testID;
 @property (nonatomic) BOOL enabled;
 @property (nonatomic) RNGestureHandlerActionType actionType;
 @property (nonatomic) BOOL shouldCancelWhenOutside;

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

@@ -102,6 +102,7 @@ - (instancetype)initWithTag:(NSNumber *)tag
 - (void)resetConfig
 {
   self.enabled = YES;
+  self.testID = nil;
   self.manualActivation = NO;
   _shouldCancelWhenOutside = NO;
   _hitSlop = RNGHHitSlopEmpty;
@@ -126,6 +127,11 @@ - (void)updateConfig:(NSDictionary *)config
     self.enabled = [RCTConvert BOOL:prop];
   }
 
+  prop = config[@"testID"];
+  if (prop != nil) {
+    self.testID = [RCTConvert NSString:prop];
+  }
+
   prop = config[@"shouldCancelWhenOutside"];
   if (prop != nil) {
     _shouldCancelWhenOutside = [RCTConvert BOOL:prop];

packages/react-native-gesture-handler/src/v3/createNativeWrapper.tsx

@@ -42,6 +42,7 @@ export default function createNativeWrapper<P>(
         childProps: {
           enabled: props.enabled,
           hitSlop: props.hitSlop,
+          testID: props.testID,
         } as P,
       }
     );

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

@@ -44,6 +44,11 @@ export const allowedNativeProps = new Set<
   'needsPointerData',
 ]);
 
+// Don't pass testID to the native side in production
+if (!__DEV__) {
+  allowedNativeProps.delete('testID');
+}
+
 export const HandlerCallbacks = new Set<
   keyof Required<GestureCallbacks<unknown>>
 >([

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -48,6 +48,7 @@ export default abstract class GestureHandler implements IGestureHandler {
   private forAnimated: boolean = false;
   private forReanimated: boolean = false;
   private _handlerTag!: number;
+  private _testID?: string = undefined;
 
   private hitSlop?: HitSlop = undefined;
   private manualActivation: boolean = false;
@@ -743,6 +744,10 @@ export default abstract class GestureHandler implements IGestureHandler {
       this.validateHitSlops();
     }
 
+    if (config.testID !== undefined) {
+      this._testID = config.testID;
+    }
+
     if (config.dispatchesAnimatedEvents !== undefined) {
       this.forAnimated = config.dispatchesAnimatedEvents;
     }
@@ -936,6 +941,7 @@ export default abstract class GestureHandler implements IGestureHandler {
   }
 
   protected resetConfig(): void {
+    this._testID = undefined;
     this.manualActivation = false;
     this.shouldCancelWhenOutside = false;
     this.mouseButton = undefined;
@@ -965,6 +971,10 @@ export default abstract class GestureHandler implements IGestureHandler {
     this._handlerTag = value;
   }
 
+  public get testID() {
+    return this._testID;
+  }
+
   public get delegate() {
     return this._delegate;
   }

packages/react-native-gesture-handler/src/web/handlers/IGestureHandler.ts

@@ -17,6 +17,7 @@ export default interface IGestureHandler {
   activationIndex: number;
   awaiting: boolean;
   handlerTag: number;
+  readonly testID?: string;
   readonly delegate: GestureHandlerDelegate<unknown, this>;
   readonly tracker: PointerTracker;
   readonly name: SingleGestureName;

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

@@ -32,6 +32,7 @@ export interface Handler {
 type ConfigArgs =
   | number
   | boolean
+  | string
   | HitSlop
   | UserSelect
   | TouchAction
@@ -57,6 +58,7 @@ export interface Config extends Record<string, ConfigArgs> {
   dispatchesAnimatedEvents?: false;
   dispatchesReanimatedEvents?: boolean;
   needsPointerData?: false;
+  testID?: string;
 
   activateAfterLongPress?: number;
   failOffsetXStart?: number;