@symbiote-native/react 3.2.0 → 3.4.0

package/build/modules/status-bar/index.android.js

@@ -1,31 +1,11 @@
-// StatusBar on Android: the declarative React half only. The native StatusBarManager driving
-// (applyStatusBarProps), the imperative statics (statusBarImperative), and the Android
-// currentHeight getter (statusBarCurrentHeight) all live in @symbiote-native/engine, shared
-// verbatim with every adapter (Vue's status-bar.ts, Angular's status-bar.ts drive the exact
-// same functions). This file supplies only what's React-specific: an FC that renders null and
-// re-applies props via useEffect on mount + every prop change, with the imperative statics
-// attached to the function object, exactly like RN's own StatusBar.
+// StatusBar on Android: the shared declarative component with the engine's imperative statics
+// attached to the function object, plus the `currentHeight` getter
 //
-// Metro picks this file on an Android host, resolving '@symbiote-native/engine's relative
-// './status-bar' import to its own index.android.ts in turn (Android's native module is a
-// DIFFERENT shape from iOS — single-arg setHidden(hidden)/setStyle(style) plus
-// setColor/setTranslucent — all handled inside that engine module, not here).
-import { useEffect } from 'react';
-import { applyStatusBarProps, statusBarImperative, statusBarCurrentHeight, } from '@symbiote-native/engine';
-// Renders null and applies its props to the native module in an effect, on mount and on
-// every prop change, same contract as iOS.
-const StatusBarAndroidComponent = props => {
-    const { barStyle, hidden, animated, backgroundColor, translucent } = props;
-    useEffect(() => {
-        applyStatusBarProps(props);
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are the primitive fields, not `props` itself, so an unchanged prop shape doesn't re-fire.
-    }, [barStyle, hidden, animated, backgroundColor, translucent]);
-    return null;
-};
-const StatusBarAndroid = Object.assign(StatusBarAndroidComponent, statusBarImperative);
-// Android exposes the bar height as a native constant; undefined if the module or the
-// constant is absent. Read lazily (getter, not a value) so nothing touches native at import
-// time — the engine's Android impl resolves it on access.
+// Metro picks this file on an Android host
+import { statusBarImperative, statusBarCurrentHeight, } from '@symbiote-native/engine';
+import { StatusBarComponent } from './shared.js';
+const StatusBarAndroid = Object.assign(StatusBarComponent, statusBarImperative);
+// A getter, not a value, so nothing touches native at import time
 Object.defineProperty(StatusBarAndroid, 'currentHeight', {
     get: statusBarCurrentHeight,
     enumerable: true,

package/build/modules/status-bar/index.ios.d.ts

@@ -1,3 +1,3 @@
-import type { IStatusBarComponent } from './shared';
+import { type IStatusBarComponent } from './shared';
 export type { IStatusBarProps, IStatusBarStyle } from './shared';
 export declare const StatusBar: IStatusBarComponent;

package/build/modules/status-bar/index.ios.js

@@ -1,29 +1,5 @@
-// StatusBar on iOS: the declarative React half only. The native `StatusBarManager`
-// TurboModule driving (applyStatusBarProps), the imperative statics (statusBarImperative),
-// and the iOS currentHeight stub all live in @symbiote-native/engine, shared verbatim with
-// every adapter (Vue's status-bar.ts, Angular's status-bar.ts drive the exact same functions).
-// This file supplies only what's React-specific: an FC that renders null and re-applies props
-// via useEffect on mount + every prop change, with the imperative statics attached to the
-// function object, exactly like RN's own StatusBar.
-//
-// Metro picks this file on an iOS host; the headless/tsx base (status-bar/index.ts) re-exports
-// it, which is also what a bare '@symbiote-native/engine' import resolves to under vitest — so
-// this file's own engine import is already vitest-correct, no platform-selection subtlety here.
-import { useEffect } from 'react';
-import { applyStatusBarProps, statusBarImperative, } from '@symbiote-native/engine';
-// StatusBar renders null and applies its props to the native module in an effect,
-// on mount and on every prop change. Simplification vs RN: RN maintains a
-// prop-merge stack so nested StatusBars compose (deepest/last wins). This module
-// direct-applies a single component's props, which is correct for one StatusBar.
-const StatusBarComponent = props => {
-    const { barStyle, hidden, animated, networkActivityIndicatorVisible } = props;
-    useEffect(() => {
-        applyStatusBarProps(props);
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are the primitive fields, not `props` itself, so an unchanged prop shape doesn't re-fire.
-    }, [barStyle, hidden, animated, networkActivityIndicatorVisible]);
-    return null;
-};
-// The imperative statics mirror the declarative component: non-throwing, a missing optional
-// native module is a no-op. currentHeight is Android-only; absent on iOS (RN sets it to null
-// on iOS), so it's intentionally not attached here.
+// StatusBar on iOS: the shared component with the engine's statics attached, like RN
+// `currentHeight` is Android-only, so it is absent here
+import { statusBarImperative } from '@symbiote-native/engine';
+import { StatusBarComponent } from './shared.js';
 export const StatusBar = Object.assign(StatusBarComponent, statusBarImperative);

package/build/modules/status-bar/shared.d.ts

@@ -1,6 +1,7 @@
-import type { FC } from 'react';
-import type { IStatusBarImperative, IStatusBarProps } from '@symbiote-native/engine';
+import { type FC } from 'react';
+import { type IStatusBarImperative, type IStatusBarProps } from '@symbiote-native/engine';
 export type { IStatusBarProps, IStatusBarStyle, IStatusBarAnimation, } from '@symbiote-native/engine';
-export interface IStatusBarComponent extends FC<IStatusBarProps>, IStatusBarImperative {
+export type IStatusBarComponent = FC<IStatusBarProps> & IStatusBarImperative & {
     currentHeight?: number;
-}
+};
+export declare const StatusBarComponent: FC<IStatusBarProps>;

package/build/modules/status-bar/shared.js

@@ -1,6 +1,33 @@
-// StatusBar is the React-side contract. The pure types + the imperative API + applyStatusBarProps
-// live in @symbiote-native/engine (shared verbatim with every adapter); React supplies only the
-// declarative component shape: an FC that renders null and applies the props in an effect, with
-// the imperative statics attached to the function object (RN's StatusBar). IStatusBarComponent
-// is the one React-coupled type (it names React's FC), so it stays here, not in the engine.
-export {};
+// StatusBar is the React-side contract. Types, the imperative API and the props stack live in
+// @symbiote-native/engine, React supplies the declarative component: an FC that renders null and
+// keeps one stack entry for as long as it is mounted
+import { useEffect, useState } from 'react';
+import { createStatusBarEntry, } from '@symbiote-native/engine';
+// Every field is a dependency, the engine ignores the ones its platform has no use for
+export const StatusBarComponent = props => {
+    const { barStyle, hidden, animated, showHideTransition, networkActivityIndicatorVisible, backgroundColor, translucent, } = props;
+    const [entry] = useState(createStatusBarEntry);
+    useEffect(() => {
+        entry.apply({
+            barStyle,
+            hidden,
+            animated,
+            showHideTransition,
+            networkActivityIndicatorVisible,
+            backgroundColor,
+            translucent,
+        });
+    }, [
+        entry,
+        barStyle,
+        hidden,
+        animated,
+        showHideTransition,
+        networkActivityIndicatorVisible,
+        backgroundColor,
+        translucent,
+    ]);
+    // Popping on unmount restores what the stack held below this entry
+    useEffect(() => () => entry.release(), [entry]);
+    return null;
+};

package/build/native-host-tags.d.ts

@@ -0,0 +1,2 @@
+export declare const unstable_NativeText = "text";
+export declare const unstable_NativeView = "view";

package/build/native-host-tags.js

@@ -0,0 +1,4 @@
+// RN's `unstable_NativeText` and `unstable_NativeView`: the element types of its raw host
+// components, which are the intrinsic `text` and `view` tags here
+export const unstable_NativeText = 'text';
+export const unstable_NativeView = 'view';

package/build/render.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type IRootTag, type SymbioteSurface } from '@symbiote-native/engine';
 export declare function mount(rootTag: IRootTag, element: ReactNode): SymbioteSurface;
 export declare function unmount(rootTag: IRootTag): void;

package/build/render.js

@@ -1,9 +1,11 @@
 // Mount a React element tree onto a Fabric surface. The native host hands us a
 // rootTag (via AppRegistry.registerRunnable); we create a surface for it and let
 // the reconciler drive shared, which commits into nativeFabricUIManager.
+import { createElement } from 'react';
 import { createSurface, disposeRoot, setEventDispatcher, dlog, reportUncaughtError, } from '@symbiote-native/engine';
 import reconciler, { flushExternalUpdate } from './host-config.js';
 import { ConcurrentRoot } from './reconciler-constants.js';
+import { RootTagContext } from './root-tag-context.js';
 const noop = () => { };
 function errorReporter(origin) {
     return (error, info) => {
@@ -71,7 +73,7 @@ export function mount(rootTag, element) {
     containers.set(rootTag, container);
     // react-reconciler 0.33 renamed updateContainer/flushSync; @types 0.32 still has the old names.
     // @ts-expect-error updateContainerSync exists at runtime in react-reconciler 0.33
-    reconciler.updateContainerSync(element, container, null, noop);
+    reconciler.updateContainerSync(createElement(RootTagContext.Provider, { value: rootTag }, element), container, null, noop);
     // @ts-expect-error flushSyncWork exists at runtime in react-reconciler 0.33
     reconciler.flushSyncWork();
     return surface;

package/build/root-tag-context.d.ts

@@ -0,0 +1 @@
+export declare const RootTagContext: import("react").Context<number>;

package/build/root-tag-context.js

@@ -0,0 +1,4 @@
+// RN's `RootTagContext`: every `mount` provides the tag of its surface, 0 stays the default
+import { createContext } from 'react';
+const NO_SURFACE = 0;
+export const RootTagContext = createContext(NO_SURFACE);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/react",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "SymbioteNative's React adapter — a react-reconciler host config (mutation mode) driving real native iOS/Android views through stock React Native Fabric.",
   "license": "MIT",
   "repository": {
@@ -57,21 +57,21 @@
   },
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@symbiote-native/components": "3.1.4",
-    "@symbiote-native/css-parser": "0.5.3"
+    "@symbiote-native/components": "3.3.0",
+    "@symbiote-native/css-parser": "0.6.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.5.0"
+    "@symbiote-native/engine": "^1.7.0"
   },
   "devDependencies": {
     "@types/node": "^26.0.0",
     "@types/react": "^19.2.0",
     "@types/react-reconciler": "^0.32.2",
     "react": "19.2.3",
-    "@symbiote-native/engine": "1.5.0",
-    "@symbiote-native/test-utils": "0.4.6"
+    "@symbiote-native/engine": "1.7.0",
+    "@symbiote-native/test-utils": "0.5.0"
   },
   "scripts": {
     "typecheck": "tsc --build",