@leonsilicon/react-native-wishlist 0.0.0 → 0.0.2

package/src/Components/Pressable.tsx

@@ -1,17 +1,20 @@
 import React, { forwardRef } from 'react';
-import { NativeModules, View, ViewProps } from 'react-native';
+import { DeviceEventEmitter, NativeModules, View, ViewProps } from 'react-native';
 import { createTemplateComponent } from '../createTemplateComponent';
 import { useTemplateCallback } from '../EventHandler';
 import { getUIInflatorRegistry } from '../InflatorRepository';
-import { createRunInJsFn } from '../WishlistJsRuntime';
+import { createRunInWishlistFn, createRunInJsFn } from '../WishlistJsRuntime';
 
-// TODO(janic): Figure out why those cannot be imported directly from RNGH in the example app.
+// Mirrors `RNGestureHandlerActionType` in react-native-gesture-handler. On the
+// new architecture every state-change action type routes through
+// `sendDeviceEventWithName:@"onGestureHandlerStateChange"` (a global JS device
+// event), so we listen via `DeviceEventEmitter` and dispatch into the wishlist
+// worklet runtime ourselves rather than relying on Fabric event observers.
 const ActionType = {
   REANIMATED_WORKLET: 1,
   NATIVE_ANIMATED_EVENT: 2,
   JS_FUNCTION_OLD_API: 3,
   JS_FUNCTION_NEW_API: 4,
-  DIRECT_EVENT: 5,
 } as const;
 
 type ActionTypeT = (typeof ActionType)[keyof typeof ActionType];
@@ -38,12 +41,20 @@ type RNGestureHandlerModuleProps = {
   flushOperations: () => void;
 };
 
-let _handlerTag = 1000;
+// Start above the range RNGH typically issues for handlers created via JS so
+// our auto-generated tags don't collide with user-created gestures. Offset by
+// a per-load random base so a Metro JS reload doesn't reuse the tags from the
+// previous load (RNGH's native registry persists across JS reloads and would
+// throw `HandlerAlreadyRegistered`).
+let _handlerTag = 100000 + Math.floor(Math.random() * 1_000_000);
 
 export function getNextHandlerTag(): number {
   return _handlerTag++;
 }
 
+const _attachedViewTags = new Set<number>();
+const _handlerTagToViewTag = new Map<number, number>();
+
 const RNGestureHandlerModule: RNGestureHandlerModuleProps =
   NativeModules.RNGestureHandlerModule;
 
@@ -56,22 +67,69 @@ export const State = {
   END: 5,
 } as const;
 
+const dispatchGestureEventToWishlistRuntime = createRunInWishlistFn(
+  (viewTag: number, event: any) => {
+    'worklet';
+    const handleEvent = global.handleEvent;
+    if (typeof handleEvent === 'function') {
+      handleEvent('onGestureHandlerStateChange', viewTag, event);
+    }
+  },
+);
+
+let _gestureListenerInstalled = false;
+function installGestureListener() {
+  if (_gestureListenerInstalled) {
+    return;
+  }
+  _gestureListenerInstalled = true;
+  DeviceEventEmitter.addListener(
+    'onGestureHandlerStateChange',
+    (event: { handlerTag: number; state: number }) => {
+      const viewTag = _handlerTagToViewTag.get(event.handlerTag);
+      if (viewTag == null) {
+        return;
+      }
+      dispatchGestureEventToWishlistRuntime(viewTag, event);
+    },
+  );
+}
+
 type PressableProps = ViewProps & {
   onPress?: ((item: any, rootItem: any) => void) | null;
 };
 
 const attachGestureHandler = createRunInJsFn((tag: number) => {
-  // TODO: Do we need to detach handlers?
+  if (_attachedViewTags.has(tag)) {
+    return;
+  }
+  _attachedViewTags.add(tag);
+  installGestureListener();
   const handlerTag = getNextHandlerTag();
-  RNGestureHandlerModule.createGestureHandler(
-    'TapGestureHandler',
-    handlerTag,
-    {},
-  );
+  _handlerTagToViewTag.set(handlerTag, tag);
+  try {
+    RNGestureHandlerModule.createGestureHandler(
+      'TapGestureHandler',
+      handlerTag,
+      {},
+    );
+  } catch (e) {
+    // RNGH keeps its handler registry alive across Metro JS reloads. If a
+    // handler with this tag already exists from a prior load, drop it and
+    // retry — losing the stale handler is fine since its view is gone too.
+    try {
+      RNGestureHandlerModule.dropGestureHandler(handlerTag);
+    } catch {}
+    RNGestureHandlerModule.createGestureHandler(
+      'TapGestureHandler',
+      handlerTag,
+      {},
+    );
+  }
   RNGestureHandlerModule.attachGestureHandler(
     handlerTag,
     tag,
-    ActionType.DIRECT_EVENT,
+    ActionType.JS_FUNCTION_OLD_API,
   );
   RNGestureHandlerModule.flushOperations();
 });

package/src/Components/Switch.tsx

@@ -1,7 +1,10 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { View, ViewStyle } from 'react-native';
 import { createTemplateComponent } from '../createTemplateComponent';
 import type { TemplateValue } from '../TemplateValue';
+import { CaseBase } from './CaseBase';
+
+export { CaseBase };
 
 const SwitchTemplateComponent = createTemplateComponent(View);
 
@@ -23,10 +26,6 @@ export function Switch(props: SwitchProps) {
   return <SwitchTemplateComponent {...props} children={children} />;
 }
 
-export const CaseBase = forwardRef<any, any>((props, ref) => {
-  return <View {...props} ref={ref} />;
-});
-
 const CaseTemplateComponent = createTemplateComponent(CaseBase, {
   addProps: (item, props) => {
     'worklet';

package/src/Specs/NativeContentContainer.ts

@@ -1,5 +1,4 @@
-import type { ViewProps } from 'react-native';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { codegenNativeComponent, type ViewProps } from 'react-native';
 
 export interface NativeContentContainerProps extends ViewProps {}
 

package/src/Specs/NativeTemplateContainer.ts

@@ -1,5 +1,4 @@
-import type { ViewProps } from 'react-native';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { codegenNativeComponent, type ViewProps } from 'react-native';
 
 export interface NativeTemplateContainerProps extends ViewProps {
   inflatorId: string;

package/src/Specs/NativeTemplateInterceptor.ts

@@ -1,5 +1,4 @@
-import type { ViewProps } from 'react-native';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { codegenNativeComponent, type ViewProps } from 'react-native';
 
 export interface NativeTemplateInterceptorProps extends ViewProps {}
 

package/src/Specs/NativeWishlist.ts

@@ -1,14 +1,15 @@
 import type * as React from 'react';
-import type { ViewProps } from 'react-native';
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type HostComponent,
+  type ViewProps,
+} from 'react-native';
 import type {
   DirectEventHandler,
   Double,
   Int32,
 } from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import codegenNativeComponent, {
-  NativeComponentType,
-} from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 export type EventInFile = Readonly<{
   value: Double;
@@ -21,7 +22,7 @@ export interface WishlistProps extends ViewProps {
   onEndReached?: DirectEventHandler<Readonly<{}>>;
 }
 
-type NativeType = NativeComponentType<WishlistProps>;
+type NativeType = HostComponent<WishlistProps>;
 
 export type ScrollToItem = (
   viewRef: React.ElementRef<NativeType>,

package/src/TemplateValue.tsx

@@ -86,6 +86,11 @@ export function isTemplateValue(
   );
 }
 
+/**
+ * The `mapper` runs on the UI worklet runtime. Mark it (and any nested function
+ * literals it passes to helpers like `Array#reduce`) with a leading
+ * `'worklet';` statement so `react-native-worklets-core` can compile them.
+ */
 export function useTemplateValue<ItemT, ValueT>(
   mapper: TemplateValueMapper<ItemT, ValueT>,
 ): TemplateValue<ValueT> {

package/src/createTemplateComponent.tsx

@@ -5,7 +5,7 @@ import { ForEachBase } from './Components/ForEachBase';
 import InflatorRepository, {
   getUIInflatorRegistry,
 } from './InflatorRepository';
-import { CaseBase } from './Components/Switch';
+import { CaseBase } from './Components/CaseBase';
 import { useTemplateContext } from './TemplateContext';
 import {
   createTemplateValue,