@mobileai/react-native 0.9.4 → 0.9.9

package/src/tools/typeTool.ts

@@ -1,60 +1,33 @@
 /**
  * Type Tool — Reliable multi-strategy text input.
  *
- * Strategy chain (tried in order, first success wins):
+ * For uncontrolled TextInputs (defaultValue, no onChangeText):
+ *   1. Walk fiber subtree (BFS) to find the native host view whose
+ *      memoizedProps has `onChange` — this is RN's internal `_onChange`.
+ *   2. ALSO walk to find the native stateNode with `setNativeProps` to
+ *      update the VISUAL text in the native view.
  *
- * 1. onChangeText — developer's controlled component wired React state.
- *    → calls element.props.onChangeText(text) directly.
+ * Both steps are needed:
+ *   - `onChange` → updates React's internal lastNativeText state
+ *   - `setNativeProps` → updates what the user sees on screen
  *
- * 2. Fiber subtree walk — for uncontrolled TextInputs (defaultValue only).
- *    React Native's TextInput.js always creates an internal `_onChange` handler
- *    and passes it as `onChange` to the native host view (RCTTextInputView /
- *    AndroidTextInput). That `_onChange` internally calls `props.onChangeText`
- *    and updates native text state.
- *
- *    We walk the fiber subtree (behavior-based, no tag numbers) to find any
- *    descendant node whose memoizedProps.onChange is a function. Then we call
- *    it with a synthetic TextInputChangeEvent. This triggers RN's internal
- *    `_onChange` which calls `setLastNativeText` and updates the native view.
- *
- * Why this is robust:
- *  - No hardcoded fiber tag numbers (host component tags can change across versions)
- *  - No dependency on setNativeProps (deprecated in New Architecture / Fabric)
- *  - Uses the same code path as a real user typing — RN's own _onChange handler
+ * No hardcoded fiber tag numbers. Detection is purely behavior-based.
  */
 
 import { walkFiberTree } from '../core/FiberTreeWalker';
 import type { AgentTool, ToolContext } from './types';
 
-/**
- * Walk a fiber subtree to find the first descendant whose memoizedProps
- * has an `onChange` function. This is behavior-based — we don't check
- * fiber tags, component names, or any React internal that could change.
- * We just look for the prop that RN's TextInput always wires.
- */
-function findNativeOnChange(fiber: any, maxDepth = 8): ((event: any) => void) | null {
-  if (!fiber) return null;
-
-  let current: any = fiber.child;
-
-  // BFS-style walk through the fiber children
-  const queue: { node: any; depth: number }[] = [];
-  if (current) queue.push({ node: current, depth: 0 });
-
+/** BFS through fiber children. Returns first node where predicate matches. */
+function findFiberNode(rootFiber: any, predicate: (node: any) => boolean, maxDepth = 10): any | null {
+  if (!rootFiber?.child) return null;
+  const queue: { node: any; depth: number }[] = [{ node: rootFiber.child, depth: 0 }];
   while (queue.length > 0) {
-    const { node, depth: d } = queue.shift()!;
-    if (d > maxDepth) continue;
-
-    const props = node.memoizedProps;
-    if (props && typeof props.onChange === 'function') {
-      return props.onChange;
-    }
-
-    // Add child and sibling
-    if (node.child) queue.push({ node: node.child, depth: d + 1 });
-    if (node.sibling) queue.push({ node: node.sibling, depth: d + 1 });
+    const { node, depth } = queue.shift()!;
+    if (!node || depth > maxDepth) continue;
+    if (predicate(node)) return node;
+    if (node.child) queue.push({ node: node.child, depth: depth + 1 });
+    if (node.sibling) queue.push({ node: node.sibling, depth: depth + 1 });
   }
-
   return null;
 }
 
@@ -76,9 +49,9 @@ export function createTypeTool(context: ToolContext): AgentTool {
 
       const props = element.props;
       const label = element.label || `[${element.type}]`;
+      const fiberNode = element.fiberNode;
 
       // ── Strategy 1: controlled via onChangeText ───────────────────────────
-      // App developer wired onChangeText={setText} — most reliable.
       if (typeof props.onChangeText === 'function') {
         try {
           props.onChangeText(args.text);
@@ -89,37 +62,52 @@ export function createTypeTool(context: ToolContext): AgentTool {
         }
       }
 
-      // ── Strategy 2: fiber subtree walk for native onChange ─────────────────
-      // For uncontrolled TextInputs (defaultValue only, no onChangeText).
-      // RN's TextInput.js creates _onChange internally and passes it as
-      // onChange to the native host view. We find that handler and call it
-      // with a synthetic TextInputChangeEvent.
-      const fiberNode = element.fiberNode;
+      // ── Strategy 2: uncontrolled — find native onChange + setNativeProps ──
+      // For TextInputs with defaultValue only.
+      // We need BOTH:
+      //   a) find the onChange handler (RN's internal _onChange) to update React state
+      //   b) find the native stateNode to call setNativeProps to update visual display
       if (fiberNode) {
-        // First check the matched fiber itself
-        const directOnChange = fiberNode.memoizedProps?.onChange;
-        const onChange = typeof directOnChange === 'function'
-          ? directOnChange
-          : findNativeOnChange(fiberNode);
+        // Find native onChange handler (behavior-based, no tag numbers)
+        const nativeOnChangeFiber = fiberNode.memoizedProps?.onChange
+          ? fiberNode
+          : findFiberNode(fiberNode, n => typeof n.memoizedProps?.onChange === 'function');
 
-        if (onChange) {
+        // Find native stateNode (host component with setNativeProps)
+        const nativeStateFiber = fiberNode.stateNode?.setNativeProps
+          ? fiberNode
+          : findFiberNode(fiberNode, n => n.stateNode && typeof n.stateNode.setNativeProps === 'function');
+
+        const onChange = nativeOnChangeFiber?.memoizedProps?.onChange;
+        const nativeInstance = nativeStateFiber?.stateNode;
+
+        if (onChange || nativeInstance) {
           try {
-            onChange({
-              nativeEvent: {
-                text: args.text,
-                eventCount: 0,
-                target: 0,
-              },
-            });
+            // Step 1: Update visual text in native view
+            if (nativeInstance && typeof nativeInstance.setNativeProps === 'function') {
+              nativeInstance.setNativeProps({ text: args.text });
+            }
+
+            // Step 2: Notify React's internal onChange so lastNativeText stays in sync
+            if (typeof onChange === 'function') {
+              onChange({
+                nativeEvent: {
+                  text: args.text,
+                  eventCount: 1,
+                  target: 0,
+                },
+              });
+            }
+
             await new Promise(resolve => setTimeout(resolve, 300));
             return `✅ Typed "${args.text}" into [${args.index}] "${label}"`;
           } catch (err: any) {
-            return `❌ onChange failed: ${err.message}`;
+            return `❌ Type failed: ${err.message}`;
           }
         }
       }
 
-      return `❌ Element [${args.index}] "${label}" is not a typeable text input. No onChangeText or onChange handler found in fiber tree.`;
+      return `❌ Element [${args.index}] "${label}" is not a typeable text input. No onChange or native stateNode found in fiber tree.`;
     },
   };
 }