react-native-netmera 2.0.0 → 2.1.0-alpha01

package/src/NetmeraAnalyticProvider.tsx

@@ -0,0 +1,124 @@
+/*
+ * Copyright (c) 2026 Netmera Research.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  NativeEventEmitter,
+  NativeModules,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { useNavigationTracking } from './autotracking/useNavigationTracking';
+import { useTapTracking } from './autotracking/useTapTracking';
+
+export interface NetmeraAnalyticProviderProps {
+  children: React.ReactNode;
+  /**
+   * Required on Old Architecture (newArchEnabled=false). Pass your NavigationContainer
+   * ref so the provider can subscribe to screen changes.
+   *
+   * On New Architecture the provider detects the navigation context automatically
+   * through the fiber tree — this prop is not needed.
+   *
+   *   const navRef = useRef(null);
+   *   <NetmeraAnalyticProvider navigationRef={navRef}>
+   *     <NavigationContainer ref={navRef}>…</NavigationContainer>
+   *   </NetmeraAnalyticProvider>
+   */
+  navigationRef?: React.RefObject<any>;
+}
+
+type AutoTrackConfig = {
+  isScreenFlowEnabled: boolean;
+  isInputActionEnabled: boolean;
+  shouldCollectValues: boolean;
+};
+
+/**
+ * Wraps your app to enable automatic screen tracking and tap tracking.
+ *
+ *   <NetmeraAnalyticProvider>
+ *     <NavigationContainer>…</NavigationContainer>
+ *   </NetmeraAnalyticProvider>
+ */
+export function NetmeraAnalyticProvider({
+  children,
+  navigationRef,
+}: NetmeraAnalyticProviderProps) {
+  const viewRef = useRef<any>(null);
+  const [config, setConfig] = useState<AutoTrackConfig | null>(null);
+  const appliedConfigRef = useRef<AutoTrackConfig | null>(null);
+
+  const applyConfig = (cfg: AutoTrackConfig) => {
+    const prev = appliedConfigRef.current;
+    if (
+      prev?.isScreenFlowEnabled === cfg.isScreenFlowEnabled &&
+      prev?.isInputActionEnabled === cfg.isInputActionEnabled &&
+      prev?.shouldCollectValues === cfg.shouldCollectValues
+    )
+      return;
+    appliedConfigRef.current = cfg;
+    setConfig(cfg);
+    console.log(
+      '[NMAutotrack] screen tracking ',
+      cfg.isScreenFlowEnabled ? 'enabled' : 'disabled'
+    );
+    console.log(
+      '[NMAutotrack] input action tracking ',
+      cfg.isInputActionEnabled ? 'enabled' : 'disabled'
+    );
+  };
+
+  useEffect(() => {
+    NativeModules.RNNetmera?.getAutoTrackConfig?.()
+      ?.then((cfg: AutoTrackConfig | null) => {
+        if (cfg) applyConfig(cfg);
+      })
+      ?.catch((_err: unknown) => {});
+  }, []);
+
+  useEffect(() => {
+    const emitter = new NativeEventEmitter(
+      NativeModules.RNNetmeraRCTEventEmitter
+    );
+    const subscription = emitter.addListener(
+      'onAutoTrackConfigUpdate',
+      (cfg: AutoTrackConfig) => {
+        if (cfg) applyConfig(cfg);
+      }
+    );
+    return () => subscription.remove();
+  }, []);
+
+  const screenFlowEnabled = config?.isScreenFlowEnabled ?? false;
+  const inputActionEnabled = config?.isInputActionEnabled ?? false;
+  const shouldCollectValues = config?.shouldCollectValues ?? false;
+
+  const navigationEnabled = screenFlowEnabled || inputActionEnabled;
+  useNavigationTracking(
+    viewRef,
+    navigationRef,
+    navigationEnabled,
+    screenFlowEnabled
+  );
+  const { onTouchStart, onTouchEnd } = useTapTracking(
+    inputActionEnabled,
+    shouldCollectValues
+  );
+
+  return (
+    <View
+      ref={navigationEnabled ? viewRef : undefined}
+      style={styles.container}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

package/src/autotracking/NetmeraNavigationState.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2026 Netmera Research.
+ */
+
+let currentScreen: string | null = null;
+
+export function getCurrentScreen(): string | null {
+  return currentScreen;
+}
+
+export function setCurrentScreen(name: string): void {
+  currentScreen = name;
+}

package/src/autotracking/useNavigationTracking.ts

@@ -0,0 +1,129 @@
+/*
+ * Copyright (c) 2026 Netmera Research.
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { setCurrentScreen } from './NetmeraNavigationState';
+
+// ContextProvider fiber tag — stable React internal constant since React 16.
+const CONTEXT_PROVIDER_TAG = 10;
+const NAV_SEARCH_DEPTH = 25;
+
+// Duck-type check: React Navigation v5/v6/v7 all expose this surface on the container ref.
+function isNavContainerRef(value: any): boolean {
+  return (
+    value != null &&
+    typeof value.addListener === 'function' &&
+    typeof value.getCurrentRoute === 'function' &&
+    typeof value.isReady === 'function'
+  );
+}
+
+// DFS through child fibers to find NavigationContainerRefContext.Provider.
+// Siblings walk at the same depth — they sit at the same level in the tree.
+function findNavContainerRef(fiber: any, depth = 0): any {
+  if (!fiber || depth > NAV_SEARCH_DEPTH) return null;
+  if (
+    fiber.tag === CONTEXT_PROVIDER_TAG &&
+    isNavContainerRef(fiber.memoizedProps?.value)
+  ) {
+    return fiber.memoizedProps.value;
+  }
+  return (
+    findNavContainerRef(fiber.child, depth + 1) ??
+    findNavContainerRef(fiber.sibling, depth)
+  );
+}
+
+/**
+ * Subscribes to React Navigation screen changes and keeps NetmeraNavigationState
+ * up to date. Resolves the navigation container ref via two paths:
+ *
+ * - New Arch (Fabric): auto-detected through the fiber tree via viewRef.
+ * - Old Arch (Paper):  caller passes navigationRef prop explicitly.
+ *
+ * Silently no-ops if neither path yields a valid ref.
+ * Respects the isScreenFlowEnabled flag — screen changes are ignored when disabled.
+ */
+export function useNavigationTracking(
+  viewRef: React.RefObject<any>,
+  navigationRef: React.RefObject<any> | undefined,
+  enabled: boolean,
+  screenLogEnabled: boolean
+): void {
+  // React 18: capture own fiber during render via ReactCurrentOwner.
+  // React 19 removed ReactCurrentOwner — this silently yields null, which is fine
+  // because the Fabric path (viewRef.__internalInstanceHandle) covers React 19.
+  const screenLogEnabledRef = useRef(screenLogEnabled);
+
+  useEffect(() => {
+    screenLogEnabledRef.current = screenLogEnabled;
+  }, [screenLogEnabled]);
+
+  const selfFiberRef = useRef<any>(null);
+  if (selfFiberRef.current === null) {
+    try {
+      const R = React as any;
+      selfFiberRef.current =
+        R.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentOwner
+          ?.current ?? null;
+    } catch (_) {}
+  }
+
+  useEffect(() => {
+    if (!enabled) return;
+    let navRef: any = null;
+
+    // Path 1 — New Arch: ReactNativeElement exposes its fiber via __internalInstanceHandle.
+    // Guard with 'child' in candidate to confirm it's a fiber, not another host object.
+    const candidate = viewRef.current?.__internalInstanceHandle;
+    const viewFiber: any =
+      candidate != null && 'child' in candidate
+        ? candidate
+        : (selfFiberRef.current?.child ?? null);
+
+    if (viewFiber) {
+      navRef = findNavContainerRef(viewFiber);
+    }
+
+    // Path 2 — Old Arch: use the ref passed explicitly via prop.
+    if (!navRef && isNavContainerRef(navigationRef?.current)) {
+      navRef = navigationRef!.current;
+    }
+
+    if (!navRef) return;
+
+    const handleChange = () => {
+      try {
+        const route = navRef.getCurrentRoute();
+        if (route?.name) {
+          setCurrentScreen(route.name);
+          if (screenLogEnabledRef.current) {
+            console.log(`[NMAutotrack] screen → "${route.name}"`);
+          }
+        }
+      } catch (_) {}
+    };
+
+    const unsubState = navRef.addListener('state', handleChange);
+
+    // NavigationContainer's effects run before ours (child-first), so 'ready' has
+    // already fired. isReady() captures the initial screen synchronously; the 'ready'
+    // listener is a safety net for async startup (deferred auth, deep links, etc.).
+    let unsubReady: (() => void) | undefined;
+    if (navRef.isReady()) {
+      handleChange();
+    } else {
+      unsubReady = navRef.addListener('ready', () => {
+        handleChange();
+        unsubReady?.();
+        unsubReady = undefined;
+      });
+    }
+
+    return () => {
+      unsubState?.();
+      unsubReady?.();
+    };
+  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps
+}

package/src/autotracking/useTapTracking.ts

@@ -0,0 +1,301 @@
+/*
+ * Copyright (c) 2026 Netmera Research.
+ */
+
+import { useCallback, useEffect, useRef } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import { getCurrentScreen } from './NetmeraNavigationState';
+
+const MAX_FIBER_DEPTH = 20;
+const MAX_TEXT_DEPTH = 5;
+const TAP_THRESHOLD = 10; // px — above this distance the gesture is a scroll, not a tap
+
+// ── Fiber predicates ──────────────────────────────────────────────────────────
+
+// Skip onStartShouldSetResponder — it matches ScrollViews, which are not interactive targets.
+function isInteractive(props: any): boolean {
+  return !!(props?.onPress || props?.onClick || props?.onValueChange);
+}
+
+// Switch has onValueChange + boolean value, but no onPress/onClick.
+function isSwitch(props: any): boolean {
+  return (
+    !!props?.onValueChange &&
+    typeof props?.value === 'boolean' &&
+    !(props?.onPress || props?.onClick)
+  );
+}
+
+// SelectDropdown and similar pickers expose onSelect on an ancestor fiber.
+// Tapping them only opens the picker UI — the real select event fires separately.
+function isInsideSelectionControl(fiber: any): boolean {
+  let node: any = fiber?.return;
+  for (let d = 0; d < 5 && node; d++, node = node.return) {
+    if (node?.memoizedProps?.onSelect != null) return true;
+  }
+  return false;
+}
+
+// ── Identifier resolution ─────────────────────────────────────────────────────
+
+function textFromChildren(children: any, depth = 0): string | undefined {
+  if (depth > MAX_TEXT_DEPTH) return undefined;
+  if (typeof children === 'string') {
+    const t = children.trim();
+    return t.length > 0 ? t : undefined;
+  }
+  if (typeof children === 'number') return String(children);
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      const t = textFromChildren(child, depth + 1);
+      if (t) return t;
+    }
+    return undefined;
+  }
+  if (children != null && typeof children === 'object' && 'props' in children) {
+    return textFromChildren((children as any).props?.children, depth + 1);
+  }
+  return undefined;
+}
+
+// Priority: accessibilityLabel → testID → placeholder (TextInput) → first child text.
+function resolveIdentifier(props: any): string | undefined {
+  if (!props) return undefined;
+  if (
+    typeof props.accessibilityLabel === 'string' &&
+    props.accessibilityLabel.trim()
+  ) {
+    return props.accessibilityLabel.trim();
+  }
+  if (typeof props.testID === 'string' && props.testID.trim()) {
+    return props.testID.trim();
+  }
+  if (typeof props.placeholder === 'string' && props.placeholder.trim()) {
+    return props.placeholder.trim();
+  }
+  return textFromChildren(props.children);
+}
+
+// ── List index resolution ─────────────────────────────────────────────────────
+
+type ListIndex =
+  | { type: 'flatlist'; index: number }
+  | { type: 'sectionlist'; sectionIndex: number; itemIndex: number };
+
+function resolveListIndex(startFiber: any): ListIndex | undefined {
+  let fiber: any = startFiber;
+  for (let d = 0; d < MAX_FIBER_DEPTH && fiber; d++, fiber = fiber.return) {
+    const p = fiber.memoizedProps;
+    if (
+      typeof p?.index !== 'number' ||
+      typeof p?.cellKey !== 'string' ||
+      typeof p?.onUnmount !== 'function'
+    )
+      continue;
+
+    const cellKey: string = p.cellKey;
+
+    // Prefer stateNode.props.index over memoizedProps.index: both current and alternate
+    // fibers share the same class instance, and React writes nextProps to instance.props
+    // during reconciliation — so stateNode.props is always current even when _targetInst
+    // resolves to the stale alternate fiber (common on iOS after a commit).
+    const flatIndex: number =
+      typeof fiber.stateNode?.props?.index === 'number'
+        ? fiber.stateNode.props.index
+        : p.index;
+
+    // `sections` Array prop is only present on SectionList; VirtualizedList uses `data`.
+    let sections: any[] | undefined;
+    let up: any = fiber.return;
+    for (let i = 0; i < 15 && up; i++, up = up.return) {
+      const upProps = up.stateNode?.props ?? up.memoizedProps;
+      if (Array.isArray(upProps?.sections)) {
+        sections = upProps.sections;
+        break;
+      }
+    }
+
+    if (sections) {
+      if (cellKey.endsWith(':header') || cellKey.endsWith(':footer'))
+        return undefined;
+
+      // Mirrors VirtualizedSectionList._getItem offset arithmetic:
+      //   flatIndex 0       → section 0 header
+      //   flatIndex 1..n    → section 0 items  (itemIndex = flatIndex - 1)
+      //   flatIndex n+1     → section 0 footer
+      //   flatIndex n+2     → section 1 header …
+      let idx = flatIndex - 1;
+      for (let si = 0; si < sections.length; si++) {
+        const count = sections[si].data?.length ?? 0;
+        if (idx === -1 || idx === count) return undefined;
+        if (idx < count)
+          return { type: 'sectionlist', sectionIndex: si, itemIndex: idx };
+        idx -= count + 2;
+      }
+      return undefined;
+    }
+
+    return { type: 'flatlist', index: flatIndex };
+  }
+  return undefined;
+}
+
+// ── Log path ──────────────────────────────────────────────────────────────────
+
+function buildPath(
+  screen: string | null,
+  listType: string | null,
+  identifier: string,
+  indexSuffix: string,
+  value?: boolean
+): string {
+  const base = listType
+    ? `${screen}|${listType}|${identifier}`
+    : `${screen}|${identifier}`;
+  return value !== undefined
+    ? `${base}|${value}${indexSuffix}`
+    : `${base}${indexSuffix}`;
+}
+
+// ── Hook ──────────────────────────────────────────────────────────────────────
+
+export function useTapTracking(enabled: boolean, shouldCollectValues: boolean) {
+  const enabledRef = useRef(enabled);
+  const shouldCollectValuesRef = useRef(shouldCollectValues);
+  const touchStartRef = useRef<{
+    x: number;
+    y: number;
+    switchValue?: boolean;
+  } | null>(null);
+  const lastScreenRef = useRef<string | null | undefined>(undefined);
+
+  // Tracks the last logged value per Switch identifier so we can compute the new
+  // state as !lastLogged without re-reading the fiber. memoizedProps.value is
+  // unreliable across taps because React's current/alternate swap can expose a
+  // stale alternate fiber via _targetInst after any commit.
+  const switchLastLoggedRef = useRef<Map<string, boolean>>(new Map());
+
+  useEffect(() => {
+    enabledRef.current = enabled;
+    if (!enabled) {
+      touchStartRef.current = null;
+      lastScreenRef.current = undefined;
+      switchLastLoggedRef.current.clear();
+    }
+  }, [enabled]);
+
+  useEffect(() => {
+    shouldCollectValuesRef.current = shouldCollectValues;
+  }, [shouldCollectValues]);
+
+  const onTouchStart = useCallback((e: GestureResponderEvent) => {
+    if (!enabledRef.current) return;
+    let switchValue: boolean | undefined;
+    try {
+      let fiber: any = (e as any)._targetInst;
+      for (let d = 0; d < MAX_FIBER_DEPTH && fiber; d++, fiber = fiber.return) {
+        if (isSwitch(fiber.memoizedProps)) {
+          // Capture the committed value before any event fires — reliable first-tap baseline.
+          switchValue = fiber.memoizedProps.value;
+          break;
+        }
+      }
+    } catch (_) {}
+    touchStartRef.current = {
+      x: e.nativeEvent.pageX,
+      y: e.nativeEvent.pageY,
+      switchValue,
+    };
+  }, []);
+
+  const onTouchEnd = useCallback((e: GestureResponderEvent) => {
+    if (!enabledRef.current) return;
+    const start = touchStartRef.current;
+    if (start) {
+      const dx = Math.abs(e.nativeEvent.pageX - start.x);
+      const dy = Math.abs(e.nativeEvent.pageY - start.y);
+      if (dx > TAP_THRESHOLD || dy > TAP_THRESHOLD) return;
+    }
+
+    try {
+      let node: any = (e as any)._targetInst;
+      if (!node) return;
+
+      // Pass 1: walk up to find the first interactive ancestor.
+      // e.g. tapping a <Text> inside a <Pressable> yields the Pressable.
+      let interactiveNode: any = null;
+      let depth = 0;
+      while (node && depth < MAX_FIBER_DEPTH) {
+        if (isInteractive(node.memoizedProps)) {
+          interactiveNode = node;
+          break;
+        }
+        node = node.return;
+        depth++;
+      }
+      if (!interactiveNode) return;
+
+      // Pass 2: resolve identifier from the interactive fiber and up to 2 ancestors.
+      // The look-ahead handles TouchableOpacity, where the inner Animated.View fiber
+      // (where Pass 1 stops) may carry the accessibilityLabel from the parent TO.
+      let identifierNode: any = interactiveNode;
+      let identifier: string | undefined;
+      for (let i = 0; i < 3 && identifierNode; i++) {
+        identifier = resolveIdentifier(identifierNode.memoizedProps);
+        if (identifier) break;
+        identifierNode = identifierNode.return;
+      }
+
+      if (!identifier) return;
+
+      const isSwitchNode = isSwitch(interactiveNode.memoizedProps);
+      if (!isSwitchNode && isInsideSelectionControl(interactiveNode)) return;
+
+      const screen = getCurrentScreen();
+      if (screen !== lastScreenRef.current) {
+        switchLastLoggedRef.current.clear();
+        lastScreenRef.current = screen;
+      }
+
+      const listIndex = shouldCollectValuesRef.current
+        ? resolveListIndex(interactiveNode)
+        : undefined;
+      const listType = listIndex
+        ? listIndex.type === 'sectionlist'
+          ? 'SectionList'
+          : 'FlatList'
+        : null;
+      const indexSuffix = listIndex
+        ? listIndex.type === 'sectionlist'
+          ? `|section:${listIndex.sectionIndex},index:${listIndex.itemIndex}`
+          : `|index:${listIndex.index}`
+        : '';
+
+      if (isSwitchNode) {
+        const lastLogged = switchLastLoggedRef.current.get(identifier);
+        let newValue: boolean;
+        if (lastLogged !== undefined) {
+          newValue = !lastLogged;
+        } else {
+          const preTapValue = touchStartRef.current?.switchValue;
+          newValue =
+            preTapValue !== undefined
+              ? !preTapValue
+              : !interactiveNode.memoizedProps.value;
+        }
+        switchLastLoggedRef.current.set(identifier, newValue);
+        console.log(
+          `[NMAutotrack] tap → "${buildPath(screen, listType, identifier, indexSuffix, newValue)}"`
+        );
+      } else {
+        console.log(
+          `[NMAutotrack] tap → "${buildPath(screen, listType, identifier, indexSuffix)}"`
+        );
+      }
+    } catch (_) {
+      // Fiber tree is a private React API — fail silently.
+    }
+  }, []);
+
+  return { onTouchStart, onTouchEnd };
+}

package/src/index.ts

@@ -45,6 +45,8 @@ import { NetmeraProduct } from './events/commerce/NetmeraProduct';
 import { NetmeraEventContentComment } from './events/media/NetmeraEventContentComment';
 import { NetmeraEventContentRate } from './events/media/NetmeraEventContentRate';
 import { NetmeraEventContentView } from './events/media/NetmeraEventContentView';
+import { NetmeraAnalyticProvider } from './NetmeraAnalyticProvider';
+import type { NetmeraAnalyticProviderProps } from './NetmeraAnalyticProvider';
 
 export {
   Netmera,
@@ -94,4 +96,8 @@ export {
   NetmeraEventContentComment,
   NetmeraEventContentRate,
   NetmeraEventContentView,
+
+  // AutoTracking
+  NetmeraAnalyticProvider,
+  type NetmeraAnalyticProviderProps,
 };