feat: add React Native UIKit runtime primitives

.github/workflows/ci.yml

@@ -53,5 +53,6 @@ jobs:
           IOS_TEST_TIMEOUT_MS: "600000"
           IOS_TEST_INACTIVITY_TIMEOUT_MS: "180000"
           IOS_LOG_JUNIT: "1"
+          IOS_TEST_VERBOSE_SPECS: "1"
           IOS_SIMCTL_QUERY_TIMEOUT_MS: "10000"
         run: npm run test:ios

.oracle-context/ns-rns-first-paint/demo-react-navigation.tsx

@@ -0,0 +1,388 @@
+  const [transition, setTransition] = useState("idle");
+
+  useEffect(() => {
+    const start = navigation.addListener("transitionStart", (event) => {
+      logReactNavTiming(
+        `home-transition-start-${event.data.closing ? "closing" : "opening"}`,
+      );
+      setTransition(event.data.closing ? "closing" : "opening");
+    });
+    const end = navigation.addListener("transitionEnd", (event) => {
+      logReactNavTiming(
+        `home-transition-end-${event.data.closing ? "closing" : "opening"}`,
+      );
+      dumpNativeScriptRNSGeometry(
+        `home-transition-end-${event.data.closing ? "closing" : "opening"}`,
+      );
+      setTransition(event.data.closing ? "closed" : "open");
+    });
+
+    return () => {
+      start();
+      end();
+    };
+  }, [navigation]);
+
+  const pushDetail = useCallback(() => {
+    logReactNavTiming("push-onPress");
+    navigation.push("Detail", { serial: Date.now() % 10000 });
+    scheduleTraceExport("push", 1200);
+  }, [navigation]);
+
+  const presentModal = useCallback(() => {
+    logReactNavTiming("modal-present-onPress");
+    navigation.navigate("Modal");
+    scheduleTraceExport("modal-present", 1200);
+  }, [navigation]);
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      scrollIndicatorInsets={{ bottom: 0 }}
+      style={styles.screen}
+      contentContainerStyle={styles.content}
+    >
+      <View style={styles.headerBlock}>
+        <Text selectable style={styles.title}>
+          RNS native-stack parity
+        </Text>
+        <Text selectable style={styles.bodyText}>
+          {buildDescription}
+        </Text>
+      </View>
+
+      <View style={styles.card}>
+        <Text selectable style={styles.cardTitle}>
+          NativeScript port path
+        </Text>
+        <View style={styles.statusList}>
+          {rows.map(([label, value]) => (
+            <View key={label} style={styles.statusRow}>
+              <Text selectable style={styles.statusLabel}>
+                {label}
+              </Text>
+              <Text selectable style={styles.statusValue}>
+                {value}
+              </Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      <Pressable
+        accessibilityLabel="Push React Navigation detail"
+        accessibilityRole="button"
+        onPress={pushDetail}
+        style={styles.primaryButton}
+      >
+        <Text style={styles.primaryButtonText}>Push Detail</Text>
+      </Pressable>
+
+      <Pressable
+        accessibilityLabel="Present React Navigation modal"
+        accessibilityRole="button"
+        onPress={presentModal}
+        style={styles.secondaryButton}
+      >
+        <Text style={styles.secondaryButtonText}>Present Modal Route</Text>
+      </Pressable>
+
+      <View style={styles.splitRow}>
+        <View style={styles.metricCard}>
+          <Text selectable style={styles.metricValue}>
+            {transition}
+          </Text>
+          <Text selectable style={styles.metricLabel}>
+            transition event
+          </Text>
+        </View>
+        <View style={styles.metricCard}>
+          <Text
+            accessibilityLabel={`React Navigation header ping count ${headerPing.count}`}
+            selectable
+            style={styles.metricValue}
+          >
+            {headerPing.count}
+          </Text>
+          <Text selectable style={styles.metricLabel}>
+            header pings
+          </Text>
+        </View>
+        <View style={styles.metricCard}>
+          <Text selectable style={styles.metricValue}>
+            26
+          </Text>
+          <Text selectable style={styles.metricLabel}>
+            iOS target
+          </Text>
+        </View>
+        <View style={styles.metricCard}>
+          <Text
+            accessibilityLabel={`React Navigation menu action count ${headerPing.menuCount}`}
+            selectable
+            style={styles.metricValue}
+          >
+            {headerPing.menuCount}
+          </Text>
+          <Text selectable style={styles.metricLabel}>
+            menu actions
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.card}>
+        <Text selectable style={styles.cardTitle}>
+          Scroll coverage
+        </Text>
+        <Text selectable style={styles.cardBody}>
+          This lower card is here to verify the route uses the full tab height.
+          The scroll view should move under the native navigation header and tab
+          bar instead of stopping halfway down the screen.
+        </Text>
+      </View>
+    </ScrollView>
+  );
+}
+
+function DetailScreen({ navigation, route }: DetailProps) {
+  const headerPing = useContext(HeaderPingContext);
+
+  useEffect(() => {
+    const start = navigation.addListener("transitionStart", (event) => {
+      logReactNavTiming(
+        `detail-transition-start-${event.data.closing ? "closing" : "opening"}`,
+      );
+    });
+    const end = navigation.addListener("transitionEnd", (event) => {
+      logReactNavTiming(
+        `detail-transition-end-${event.data.closing ? "closing" : "opening"}`,
+      );
+      dumpNativeScriptRNSGeometry(
+        `detail-transition-end-${event.data.closing ? "closing" : "opening"}`,
+      );
+    });
+
+    return () => {
+      start();
+      end();
+    };
+  }, [navigation]);
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      scrollIndicatorInsets={{ bottom: 0 }}
+      style={styles.screen}
+      contentContainerStyle={styles.content}
+    >
+      <View style={styles.headerBlock}>
+        <Text selectable style={styles.title}>
+          Detail route
+        </Text>
+        <Text selectable style={styles.bodyText}>
+          Pushed with navigation.push. The visible back button is the system
+          UIKit button in minimal display mode, and the edge swipe should pop
+          this route.
+        </Text>
+      </View>
+
+      <View style={styles.card}>
+        <Text selectable style={styles.cardTitle}>
+          Route params
+        </Text>
+        <Text selectable style={styles.cardBody}>
+          serial = {route.params.serial}
+        </Text>
+        <View style={styles.pillRow}>
+          <Pill label="animated push" />
+          <Pill label="native pop" />
+          <Pill label="edge gesture" />
+        </View>
+      </View>
+
+      <View style={styles.card}>
+        <Text
+          accessibilityLabel={`React Navigation custom header action count ${headerPing.customCount}`}
+          selectable
+          style={styles.cardTitle}
+        >
+          custom header taps = {headerPing.customCount}
+        </Text>
+        <Text selectable style={styles.cardBody}>
+          This count is driven by a React Navigation headerRight React element
+          hosted in a UIKit UIBarButtonItem customView.
+        </Text>
+      </View>
+
+      <Pressable
+        accessibilityLabel="Pop React Navigation detail"
+        accessibilityRole="button"
+        onPress={() => {
+          logReactNavTiming("pop-onPress");
+          navigation.goBack();
+          scheduleTraceExport("pop", 1200);
+        }}
+        style={styles.primaryButton}
+      >
+        <Text style={styles.primaryButtonText}>Pop Detail</Text>
+      </Pressable>
+
+      <View style={styles.card}>
+        <Text selectable style={styles.cardTitle}>
+          Repeated tap guard
+        </Text>
+        <Text selectable style={styles.cardBody}>
+          UIKit owns the transition. React Navigation receives the completed
+          native stack after the push or pop animation settles.
+        </Text>
+      </View>
+    </ScrollView>
+  );
+}
+
+function DetailHeaderAction() {
+  const headerPing = useContext(HeaderPingContext);
+
+  return (
+    <Pressable
+      accessibilityLabel={`React Navigation custom header action ${headerPing.customCount}`}
+      accessibilityRole="button"
+      hitSlop={8}
+      onPress={() => {
+        logReactNavTiming("custom-header-onPress");
+        headerPing.incrementCustomHeader();
+      }}
+      style={styles.customHeaderButton}
+    >
+      <Text style={styles.customHeaderButtonText}>
+        {headerPing.customCount > 0 ? headerPing.customCount : "Tap"}
+      </Text>
+    </Pressable>
+  );
+}
+
+function DetailHeaderTitle() {
+  return (
+    <Text
+      accessibilityLabel="React Navigation custom header title"
+      numberOfLines={1}
+      style={styles.customHeaderTitle}
+    >
+      Native Detail
+    </Text>
+  );
+}
+
+function ModalScreen({ navigation }: ModalProps) {
+  useEffect(() => {
+    const start = navigation.addListener("transitionStart", (event) => {
+      logReactNavTiming(
+        `modal-transition-start-${event.data.closing ? "closing" : "opening"}`,
+      );
+    });
+    const end = navigation.addListener("transitionEnd", (event) => {
+      logReactNavTiming(
+        `modal-transition-end-${event.data.closing ? "closing" : "opening"}`,
+      );
+    });
+
+    return () => {
+      start();
+      end();
+    };
+  }, [navigation]);
+
+  const dismissModal = useCallback(() => {
+    logReactNavTiming("modal-dismiss-onPress");
+    navigation.goBack();
+    scheduleTraceExport("modal-dismiss", 1200);
+  }, [navigation]);
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      style={styles.modalScreen}
+      contentContainerStyle={styles.content}
+    >
+      <View style={styles.headerBlock}>
+        <Text selectable style={styles.title}>
+          Modal route
+        </Text>
+        <Text selectable style={styles.bodyText}>
+          This route uses React Navigation presentation options. It is included
+          to keep checking modal stack semantics in the NativeScript RNS port.
+        </Text>
+      </View>
+      <View style={styles.card}>
+        <Text selectable style={styles.cardTitle}>
+          UIKit presentation
+        </Text>
+        <Text selectable style={styles.cardBody}>
+          This screen is presented by UIKit with React Navigation state still
+          driving the route lifecycle. Dismissal should animate downward instead
+          of popping sideways.
+        </Text>
+      </View>
+      <Pressable
+        accessibilityLabel="Dismiss React Navigation modal"
+        accessibilityRole="button"
+        onPress={dismissModal}
+        style={styles.primaryButton}
+      >
+        <Text style={styles.primaryButtonText}>Dismiss Modal</Text>
+      </Pressable>
+    </ScrollView>
+  );
+}
+
+export default function ReactNavigationTab() {
+  const [headerPingCount, setHeaderPingCount] = useState(0);
+  const [customHeaderCount, setCustomHeaderCount] = useState(0);
+  const [headerMenuCount, setHeaderMenuCount] = useState(0);
+
+  const incrementHeaderPing = useCallback(() => {
+    logReactNavTiming("header-ping-onPress");
+    setHeaderPingCount((count) => count + 1);
+  }, []);
+
+  const incrementCustomHeader = useCallback(() => {
+    setCustomHeaderCount((count) => count + 1);
+  }, []);
+
+  const incrementHeaderMenu = useCallback(() => {
+    logReactNavTiming("header-menu-onPress");
+    setHeaderMenuCount((count) => count + 1);
+  }, []);
+
+  const headerPingContext = useMemo(
+    () => ({
+      count: headerPingCount,
+      customCount: customHeaderCount,
+      menuCount: headerMenuCount,
+      incrementCustomHeader,
+    }),
+    [customHeaderCount, headerMenuCount, headerPingCount, incrementCustomHeader],
+  );
+
+  return (
+    <NavigationIndependentTree>
+      <HeaderPingContext.Provider value={headerPingContext}>
+        <NavigationContainer>
+          <Stack.Navigator
+            screenOptions={{
+              contentStyle: { backgroundColor: "#f6f7fb" },
+              gestureEnabled: true,
+              headerBackButtonDisplayMode: "minimal",
+              headerShadowVisible: false,
+              headerTransparent: true,
+            }}
+          >
+            <Stack.Screen
+              name="Home"
+              component={HomeScreen}
+              options={{
+                title: "NS Port",
+                unstable_headerRightItems: () => [
+                  {
+                    type: "button",
+                    label: