@ansight/react-native 1.1.0-preview.1 → 1.2.0-preview.2

package/README.md

@@ -10,6 +10,8 @@ JavaScript-backed tools for React component-tree inspection.
 
 ## Install
 
+### React Native CLI
+
 ```sh
 npm install @ansight/react-native
 ```
@@ -23,10 +25,60 @@ npx react-native run-ios
 npx react-native run-android
 ```
 
+### Expo development builds
+
+Ansight contains native iOS and Android code, so it requires an Expo
+development build or production/EAS build. It does not run in Expo Go.
+
+```sh
+npx expo install @ansight/react-native
+```
+
+Add the bundled config plugin to the app config. It supplies the iOS camera
+usage description required by QR enrollment and the local-network description
+used when connecting to Ansight Studio:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "@ansight/react-native",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to scan an Ansight Studio enrollment QR code.",
+          "localNetworkPermission": "Allow $(PRODUCT_NAME) to connect to Ansight Studio on your local network."
+        }
+      ]
+    ]
+  }
+}
+```
+
+Omit either message to use the default. Set `cameraPermission` to `false` only
+when the app will never call `enrollFromQrCode` or `scanPairingQrCode`. Setting
+a permission option to `false` prevents Ansight from adding that key; it does
+not remove a value supplied by another plugin or by the app.
+
+Generate and rebuild the native projects after installing or updating the SDK
+or changing its plugin options:
+
+```sh
+npx expo prebuild --clean
+npx expo run:ios
+npx expo run:android
+```
+
+EAS Build applies the same plugin during prebuild. Expo Updates can update the
+JavaScript integration after the native binary has been built with a compatible
+version of `@ansight/react-native`.
+
+Expo Web is not currently supported. Do not import this package from a web
+bundle; its API requires the native Ansight module.
+
 This package version expects matching native SDK packages:
 
-- CocoaPods: `Ansight`, `AnsightObjC` version `1.1.0-preview.1`
-- Maven: `ai.ansight:ansight-android:1.1.0-preview.1`
+- CocoaPods: `Ansight`, `AnsightObjC` version `1.2.0-preview.2`
+- Maven: `ai.ansight:ansight-android:1.2.0-preview.2`
 
 ## Quickstart
 
@@ -527,3 +579,14 @@ The first-party validation app lives in:
 It exercises the native runtime bridge, standard native remote tools,
 JavaScript custom tools, React visual-tree tools, SQLite/file fixtures,
 screenshot capture, and touch/session telemetry.
+
+The current-Expo validation app lives in:
+
+```text
+/Users/matthewrobbins/Development/git/ansight-sdk-test-apps/react-native/ansight-expo-harness
+```
+
+It is pinned to Expo SDK 57 and React Native 0.86 with the New Architecture and
+Hermes enabled. It validates Expo CNG/autolinking, the bundled config plugin,
+Android and iOS native builds, and the same live Studio feature surface as the
+baseline harness.

package/android/build.gradle

@@ -67,6 +67,6 @@ repositories {
 dependencies {
   implementation("com.facebook.react:react-android")
   def ansightAndroidVersion =
-      findProperty("ansightAndroidVersion") ?: "1.1.0-preview.1"
-  implementation("ai.ansight:ansight-android:1.1.0-preview.1")
+      findProperty("ansightAndroidVersion") ?: "1.2.0-preview.2"
+  implementation("ai.ansight:ansight-android:1.2.0-preview.2")
 }

package/android/src/main/kotlin/ai/ansight/reactnative/AnsightReactNativeModule.kt

@@ -267,7 +267,7 @@ class AnsightReactNativeModule(
 
     @ReactMethod
     fun scanPairingQrCode(options: ReadableMap?, promise: Promise) {
-        val activity = currentActivity
+        val activity = reactContext.currentActivity
         if (activity == null) {
             promise.reject("ansight_qr_unavailable", "QR pairing is unavailable because no Android activity is available.")
             return
@@ -1202,7 +1202,7 @@ class AnsightReactNativeModule(
             ?: error("React Native application context is not an Android Application.")
 
     private fun bindCurrentActivity() {
-        val activity: Activity = currentActivity ?: return
+        val activity: Activity = reactContext.currentActivity ?: return
         AnsightRuntime.bindActivity(activity)
     }
 }

package/app.plugin.js

@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./expo-plugin");

package/expo-plugin.js

@@ -0,0 +1,56 @@
+"use strict";
+
+const DEFAULT_CAMERA_PERMISSION =
+  "Allow $(PRODUCT_NAME) to use the camera to scan an Ansight Studio enrollment QR code.";
+const DEFAULT_LOCAL_NETWORK_PERMISSION =
+  "Allow $(PRODUCT_NAME) to connect to Ansight Studio on your local network during development.";
+
+function withAnsightReactNative(config, options = {}) {
+  const { withInfoPlist } = loadExpoConfigPlugins();
+
+  return withInfoPlist(config, (modConfig) => {
+    const infoPlist = modConfig.modResults;
+
+    applyPermission(
+      infoPlist,
+      "NSCameraUsageDescription",
+      options.cameraPermission,
+      DEFAULT_CAMERA_PERMISSION,
+    );
+    applyPermission(
+      infoPlist,
+      "NSLocalNetworkUsageDescription",
+      options.localNetworkPermission,
+      DEFAULT_LOCAL_NETWORK_PERMISSION,
+    );
+
+    return modConfig;
+  });
+}
+
+function loadExpoConfigPlugins() {
+  const modulePath = require.resolve("expo/config-plugins", {
+    paths: [process.cwd(), __dirname],
+  });
+  return require(modulePath);
+}
+
+function applyPermission(infoPlist, key, configuredValue, defaultValue) {
+  if (configuredValue === false) {
+    return;
+  }
+
+  if (typeof configuredValue === "string" && configuredValue.trim()) {
+    infoPlist[key] = configuredValue;
+    return;
+  }
+
+  if (typeof infoPlist[key] !== "string" || !infoPlist[key].trim()) {
+    infoPlist[key] = defaultValue;
+  }
+}
+
+module.exports = withAnsightReactNative;
+module.exports.default = withAnsightReactNative;
+module.exports.DEFAULT_CAMERA_PERMISSION = DEFAULT_CAMERA_PERMISSION;
+module.exports.DEFAULT_LOCAL_NETWORK_PERMISSION = DEFAULT_LOCAL_NETWORK_PERMISSION;

package/index.js

@@ -1,6 +1,15 @@
 "use strict";
 
-const { AppState, NativeEventEmitter, NativeModules, Platform, UIManager, findNodeHandle } = require("react-native");
+const {
+  AppState,
+  NativeEventEmitter,
+  NativeModules,
+  Platform,
+  StyleSheet,
+  UIManager,
+  findNodeHandle,
+  processColor,
+} = require("react-native");
 
 const nativeModule = NativeModules.AnsightReactNative;
 
@@ -1392,6 +1401,56 @@ function summarizeProps(props) {
   return summary;
 }
 
+function reactColorToArgbHex(value) {
+  if (value == null) {
+    return undefined;
+  }
+  try {
+    const processed = typeof processColor === "function" ? processColor(value) : null;
+    if (typeof processed === "number") {
+      return `#${(processed >>> 0).toString(16).padStart(8, "0")}`.toUpperCase();
+    }
+  } catch (_) {
+    // Some dynamic platform colors cannot be represented as one resolved color.
+  }
+  return undefined;
+}
+
+function reactVisualText(fiber, props, maxStringLength) {
+  if (fiber.tag === 6) {
+    return sanitizeString(String(fiber.memoizedProps || fiber.pendingProps || ""), maxStringLength);
+  }
+  const children = summarizeReactChildren(props.children);
+  const candidate = typeof children === "string" || typeof children === "number"
+    ? children
+    : props.placeholder ?? props.title ?? props.accessibilityLabel;
+  return candidate == null ? undefined : sanitizeString(String(candidate), maxStringLength);
+}
+
+function createReactVisual(fiber, props, maxStringLength) {
+  const style = StyleSheet && typeof StyleSheet.flatten === "function"
+    ? StyleSheet.flatten(props && props.style)
+    : props && props.style;
+  const opacity = style && Number.isFinite(Number(style.opacity))
+    ? Math.max(0, Math.min(1, Number(style.opacity)))
+    : 1;
+  const visual = { opacity };
+  const foreground = reactColorToArgbHex(style && style.color);
+  const background = reactColorToArgbHex(style && style.backgroundColor);
+  const text = reactVisualText(fiber, props || {}, maxStringLength);
+  if (foreground) visual.foreground = foreground;
+  if (background) visual.background = background;
+  if (text) visual.text = text;
+
+  if (props && !props.secureTextEntry) {
+    const value = props.value ?? props.defaultValue;
+    if (value != null && ["string", "number", "boolean"].includes(typeof value)) {
+      visual.value = sanitizeString(String(value), maxStringLength);
+    }
+  }
+  return visual;
+}
+
 function nativeTagForFiber(fiber) {
   const stateNode = fiber && fiber.stateNode;
   if (!stateNode) {
@@ -1471,6 +1530,7 @@ function serializeFiber(fiber, context, depth) {
     tag: fiber.tag,
     key: fiber.key == null ? null : String(fiber.key),
     depth,
+    visual: createReactVisual(fiber, props, context.maxStringLength),
     children: [],
   };
 
@@ -1545,6 +1605,7 @@ function createShadowTreeNode(fiber, context, depth) {
     tag: fiber.tag,
     key: fiber.key == null ? null : String(fiber.key),
     depth,
+    visual: createReactVisual(fiber, props, context.maxStringLength),
     children: [],
   };
 

package/ios/AnsightReactNativeMemorySampler.mm

@@ -12,10 +12,6 @@
 #include <string>
 #include <unordered_map>
 
-@interface RCTBridge ()
-- (void)invokeAsync:(std::function<void()> &&)func;
-@end
-
 namespace {
 int64_t heapValue(
     const std::unordered_map<std::string, int64_t>& heapInfo,
@@ -89,7 +85,7 @@ int64_t heapValue(
 
   __weak AnsightReactNativeMemorySampler *weakSelf = self;
   __weak RCTBridge *weakBridge = bridge;
-  [bridge invokeAsync:[weakSelf, weakBridge]() {
+  [bridge dispatchBlock:^{
     AnsightReactNativeMemorySampler *strongSelf = weakSelf;
     RCTBridge *strongBridge = weakBridge;
     if (!strongSelf || !strongBridge) {
@@ -101,6 +97,9 @@ int64_t heapValue(
 
     @try {
       try {
+        // RCTBridgeProxy implements both dispatchBlock:queue: and runtime, so
+        // this works with the New Architecture without relying on the legacy
+        // RCTCxxBridge-only invokeAsync: selector.
         RCTCxxBridge *cxxBridge = (RCTCxxBridge *)strongBridge;
         auto *runtime = reinterpret_cast<facebook::jsi::Runtime *>(cxxBridge.runtime);
         if (runtime) {
@@ -124,7 +123,7 @@ int64_t heapValue(
     }
 
     strongSelf->_refreshScheduled.store(false);
-  }];
+  } queue:RCTJSThread];
 }
 
 @end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansight/react-native",
-  "version": "1.1.0-preview.1",
+  "version": "1.2.0-preview.2",
   "description": "React Native bridge for the Ansight mobile SDK.",
   "main": "index.js",
   "types": "index.d.ts",
@@ -25,6 +25,8 @@
     "README.md",
     "index.js",
     "index.d.ts",
+    "app.plugin.js",
+    "expo-plugin.js",
     "tsconfig.json",
     "AnsightReactNative.podspec",
     "react-native.config.js"
@@ -32,6 +34,7 @@
   "keywords": [
     "ansight",
     "react-native",
+    "expo",
     "sdk",
     "debugging",
     "inspection"
@@ -41,7 +44,7 @@
     "react-native": ">=0.72"
   },
   "scripts": {
-    "check": "node --check index.js && tsc --noEmit",
+    "check": "node --check index.js && node --check app.plugin.js && node --check expo-plugin.js && tsc --noEmit",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {