@symbiote-native/react 0.2.8 → 0.4.0

package/build/components/virtualized-section-list/index.js

@@ -6,7 +6,7 @@
 // useImperativeHandle + the per-entry render dispatch). Lower layer in RN's
 // SectionList -> VirtualizedSectionList -> VirtualizedList stack.
 import { createElement, useImperativeHandle, useRef, } from 'react';
-import { dlog, Platform } from '@symbiote-native/engine';
+import { dlog, Platform, } from '@symbiote-native/engine';
 import { flattenSections, resolveStickySectionHeaders, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
 import { VirtualizedList, } from '../virtualized-list/index.js';
 function resolveSeparator(component) {
@@ -20,7 +20,10 @@ export function VirtualizedSectionList(props) {
     const { ref, sections, renderItem, renderSectionHeader, renderSectionFooter, SectionSeparatorComponent, 
     // Pulled out of `rest`: the user's separator is typed on ItemT, but the inner VirtualizedList
     // streams ISectionEntry<ItemT>, so we wrap it to unwrap each entry back to its ItemT.
-    ItemSeparatorComponent, keyExtractor, stickySectionHeadersEnabled, ...rest } = props;
+    ItemSeparatorComponent, keyExtractor, 
+    // Also pulled out of `rest`: the inner list streams entries, the user's callback expects
+    // sections. See entryItemLayout below.
+    getItemLayout, stickySectionHeadersEnabled, ...rest } = props;
     const { entries, headerIndices } = flattenSections(sections, SectionSeparatorComponent !== undefined);
     // RN sticks section headers by default only on iOS; Android does not unless asked. headerIndices
     // are the flat positions of every section header; VirtualizedList forwards the in-window ones.
@@ -58,10 +61,14 @@ export function VirtualizedSectionList(props) {
     const renderEntry = (info) => {
         const entry = info.item;
         if (entry.kind === 'header') {
-            return renderSectionHeader ? renderSectionHeader({ section: entry.section }) : undefined;
+            return renderSectionHeader
+                ? renderSectionHeader({ section: entry.section })
+                : undefined;
         }
         if (entry.kind === 'footer') {
-            return renderSectionFooter ? renderSectionFooter({ section: entry.section }) : undefined;
+            return renderSectionFooter
+                ? renderSectionFooter({ section: entry.section })
+                : undefined;
         }
         if (entry.kind === 'section-separator') {
             return resolveSeparator(SectionSeparatorComponent);
@@ -83,6 +90,18 @@ export function VirtualizedSectionList(props) {
             trailingItem: unwrapEntryItem(entryProps.trailingItem),
         });
     const entryKeyExtractor = (entry, index) => sectionEntryKey(entry, index, keyExtractor);
+    // Hand the callback `sections`, not the entries: RN's inner VirtualizedList gets
+    // `data={this.props.sections}` (VirtualizedSectionList.js:216) while ours streams the FLATTENED
+    // entries, so the same user code would otherwise see a different argument here than on RN.
+    //
+    // UPSTREAM-DIVERGENCE(react-native): the flat INDEX matches RN's (two rows per section, header
+    // and footer) only while SectionSeparatorComponent is unset. With it, flattenSections emits an
+    // extra 'section-separator' row per boundary that RN renders inside the neighbouring cell, so
+    // indices shift by one per boundary from the second section on. Deliberate - that row is how this
+    // adapter paints the separator; a caller combining the two must account for it.
+    const entryItemLayout = getItemLayout === undefined
+        ? undefined
+        : (_entries, index) => getItemLayout(sections, index);
     return createElement((VirtualizedList), {
         ref: listRef,
         data: entries,
@@ -90,6 +109,7 @@ export function VirtualizedSectionList(props) {
         getItemCount: () => entries.length,
         renderItem: renderEntry,
         keyExtractor: entryKeyExtractor,
+        getItemLayout: entryItemLayout,
         stickyHeaderIndices,
         ItemSeparatorComponent: entrySeparatorComponent,
         ...rest,

package/build/components.js

@@ -3,7 +3,7 @@
 // reconciler maps those to shared's mutation API, which resolves them to Fabric
 // view names at commit.
 import { createElement } from 'react';
-import { resolveAccessibilityProps, } from '@symbiote-native/components';
+import { resolveAccessibilityProps, resolveTextProps, } from '@symbiote-native/components';
 // RN's modern `id` is just a W3C-named alias for `nativeID`: View.js copies it over
 // (`processedProps.nativeID = id`), so `id` wins when both are set. We fold it here and
 // blank the alias so a raw `id` never reaches Fabric (every non-function prop passes
@@ -14,4 +14,4 @@ function resolveId({ id, ...rest }) {
     return { ...rest, nativeID: id };
 }
 export const View = props => createElement('symbiote-view', resolveAccessibilityProps(resolveId(props)));
-export const Text = props => createElement('symbiote-text', resolveAccessibilityProps(props));
+export const Text = props => createElement('symbiote-text', resolveTextProps(resolveAccessibilityProps(props)));

package/build/create-portal/index.js

@@ -10,7 +10,7 @@
 // call site (e.g. a ref to a persistent "overlay host" View near your app root) — not a second,
 // independently-mounted SymbioteSurface. Cross-surface targets aren't wired: resetAfterCommit only
 // fires for the primary root's own container, so a different surface's tree would never repaint.
-import { isSymbioteNode, SymbioteSurface } from '@symbiote-native/engine';
+import { isSymbioteNode, SymbioteSurface, } from '@symbiote-native/engine';
 import reconciler from '../host-config.js';
 export function createPortal(children, container, key) {
     if (!(container instanceof SymbioteSurface) && !isSymbioteNode(container)) {

package/build/create-tunnel/index.js

@@ -1,27 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// createTunnel — the cross-surface answer to createPortal's same-surface-only scope.
-// Prior art: pmndrs/tunnel-rat exists precisely because a real
-// createPortal cannot reach across two genuinely separate reconciler roots — see
-// github.com/facebook/react/issues/17147 ("react-reconciler & portals: missing root
-// instance"). The fix is the one the ecosystem already settled on: don't reach into a
-// foreign surface's commit machinery — let that surface commit ITSELF, normally, by reading
+// createTunnel - the cross-surface answer to createPortal's same-surface-only scope. A real
+// createPortal cannot reach across two separate reconciler roots (see
+// github.com/facebook/react/issues/17147); the fix, same as pmndrs/tunnel-rat, is to not
+// reach into a foreign surface's commit machinery - let that surface commit itself, reading
 // from a store it's already subscribed to.
 //
-// Both In and Out are COMPONENTS (the Vue twin's shape, and the same pattern as
-// Context.Provider/Context.Consumer) — NOT hooks. This isn't just nicer call-site ergonomics:
-// it's what makes the cascade in the first place structurally impossible. An earlier
-// hook-based version (`useTunnelIn`/`useTunnelOut`, called directly inside one component)
-// produced a genuine infinite render loop — a silent white screen on device, no thrown error
-// — because notify() forces a re-render of whichever component's useSyncExternalStore call
-// subscribed, and when THAT was the SAME component that also called useTunnelIn, its own
-// effect re-ran and notified again, forever (this custom renderer's synchronous commit loop
-// has no "Maximum update depth exceeded" guard to catch it). As separate components, notify()
-// only forces Out's OWN render scope — never In's, even when both are children of the same
-// parent — so the update has nowhere to bounce back to. `Out` lives inside whichever surface
-// should PAINT the content (e.g. a persistent overlay-host surface); `In` lives ANYWHERE, same
-// surface or a totally different one, and never touches a Fabric node directly, so there is
-// no "target must already be mounted" guard to satisfy at all.
-import { Fragment, useEffect, useId, useSyncExternalStore } from 'react';
+// In and Out are COMPONENTS (Context.Provider/Consumer shape), never hooks - this is
+// load-bearing, not just ergonomics. An earlier hook-based version caused a real infinite
+// render loop on device (silent white screen, no thrown error): notify() re-renders
+// whichever component's useSyncExternalStore subscription fired, and when that was the same
+// component calling useTunnelIn, its own effect re-notified itself forever - this custom
+// renderer's synchronous commit loop has no "Maximum update depth exceeded" guard. As
+// separate components, notify() only forces Out's own render scope, so the update has
+// nowhere to bounce back to. `Out` lives in whichever surface should PAINT the content; `In`
+// lives anywhere - same surface or a different one - and never touches a Fabric node
+// directly, so there's no "target must already be mounted" guard to satisfy.
+import { Fragment, useEffect, useId, useSyncExternalStore, } from 'react';
 export function createTunnel() {
     const items = new Map();
     const listeners = new Set();

package/build/hooks/use-color-scheme.d.ts

@@ -1,2 +1,2 @@
-import { type IColorSchemeName } from '../modules/appearance';
+import { type IColorSchemeName } from '@symbiote-native/engine';
 export declare function useColorScheme(): IColorSchemeName | null;

package/build/hooks/use-color-scheme.js

@@ -2,7 +2,7 @@
 // on change. Mirrors RN's Libraries/Utilities/useColorScheme.js: a thin
 // useSyncExternalStore over Appearance's change event + current scheme read.
 import { useSyncExternalStore } from 'react';
-import { Appearance } from '../modules/appearance.js';
+import { Appearance } from '@symbiote-native/engine';
 const subscribe = (onStoreChange) => {
     const subscription = Appearance.addChangeListener(onStoreChange);
     return () => subscription.remove();

package/build/hooks/use-window-dimensions.d.ts

@@ -1,2 +1,2 @@
-import { type IDisplayMetrics } from '../modules/dimensions';
+import { type IDisplayMetrics } from '@symbiote-native/engine';
 export declare function useWindowDimensions(): IDisplayMetrics;

package/build/hooks/use-window-dimensions.js

@@ -4,7 +4,7 @@
 // subscribing to close the gap between the render-time get and the effect-time
 // listener. Only the window metrics changing triggers a re-render.
 import { useEffect, useState } from 'react';
-import { Dimensions } from '../modules/dimensions.js';
+import { Dimensions, } from '@symbiote-native/engine';
 export function useWindowDimensions() {
     const [dimensions, setDimensions] = useState(() => Dimensions.get('window'));
     useEffect(() => {

package/build/host-config.js

@@ -4,7 +4,7 @@
 // canary: a known-good driver exercising shared end to end.
 import createReconciler from 'react-reconciler';
 import { createContext } from 'react';
-import { appendChild, createElement, createRawText, insertBefore, removeChild, routeProp, setText, SymbioteSurface, } from '@symbiote-native/engine';
+import { appendChild, createElement, createRawText, insertBefore, removeChild, routeProp, setNodeHidden, setText, SymbioteSurface, } from '@symbiote-native/engine';
 import { DefaultEventPriority, DiscreteEventPriority, NoEventPriority, } from './reconciler-constants.js';
 import { toPublicInstance } from './host-instance.js';
 // Intrinsic JSX type -> Fabric component name. The name table + resolver live once in
@@ -70,7 +70,9 @@ const reconciler = createReconciler({
     getRootHostContext: () => ({ isInsideText: false }),
     getChildHostContext(parentHostContext, type) {
         const isInsideText = descriptorFor(type).isText;
-        return parentHostContext.isInsideText === isInsideText ? parentHostContext : { isInsideText };
+        return parentHostContext.isInsideText === isInsideText
+            ? parentHostContext
+            : { isInsideText };
     },
     getPublicInstance: instance => toPublicInstance(instance),
     prepareForCommit: () => null,
@@ -134,8 +136,12 @@ const reconciler = createReconciler({
     resetTextContent: () => { },
     hideTextInstance: node => setText(node, ''),
     unhideTextInstance: (node, text) => setText(node, text),
-    hideInstance: () => { },
-    unhideInstance: () => { },
+    // `Activity mode="hidden"` and a re-suspending `Suspense` both reach the tree through these.
+    // They were no-ops, so hidden content went on painting — stacked on top of whatever replaced
+    // it — and only the mount/unmount half of Activity appeared to work. The engine owns the
+    // reversible half (see setNodeHidden): the author's own style stays untouched underneath.
+    hideInstance: node => setNodeHidden(node, true),
+    unhideInstance: node => setNodeHidden(node, false),
     beforeActiveInstanceBlur: () => { },
     afterActiveInstanceBlur: () => { },
     detachDeletedInstance: () => { },
@@ -146,7 +152,9 @@ const reconciler = createReconciler({
         currentUpdatePriority = priority;
     },
     getCurrentUpdatePriority: () => currentUpdatePriority,
-    resolveUpdatePriority: () => currentUpdatePriority !== NoEventPriority ? currentUpdatePriority : DefaultEventPriority,
+    resolveUpdatePriority: () => currentUpdatePriority !== NoEventPriority
+        ? currentUpdatePriority
+        : DefaultEventPriority,
     maySuspendCommit: () => false,
     NotPendingTransition: null,
     // react's Context IS the runtime value react-reconciler's ReactContext wants

package/build/host-instance.js

@@ -1,9 +1,8 @@
-// The public instance a host ref hands back and the ref -> tag lookup. toPublicInstance and
-// IHostInstance now live in @symbiote-native/engine (they depend only on engine internals, so every
-// adapter inherits the SAME public instance); this module re-exports them so the React surface
-// (`@symbiote-native/react` exports findNodeHandle + IHostInstance, host-config grafts via
-// toPublicInstance) is unchanged. findNodeHandle stays here: it is the React-shaped "ref ->
-// native tag" lookup over the engine's getNativeTag.
+// The public instance a host ref hands back, and the ref -> tag lookup. toPublicInstance and
+// IHostInstance live in @symbiote-native/engine (every adapter inherits the same public instance);
+// this module re-exports them so the React surface (findNodeHandle + IHostInstance, host-config's
+// toPublicInstance graft) is unchanged. findNodeHandle stays React-specific: it is the
+// RN-shaped "ref -> native tag" lookup over the engine's getNativeTag.
 import { getNativeTag, isSymbioteNode, toPublicInstance, } from '@symbiote-native/engine';
 export { toPublicInstance };
 // The committed native tag of a host ref (or a bare tag, idempotent). RN's

package/build/index.d.ts

@@ -7,13 +7,11 @@ export type { IImageProps, IImageSource, IImageSourceProp, IResizeMode, IImageSi
 export { ImageBackground } from './components/image-background';
 export type { IImageBackgroundProps } from './components/image-background';
 export { ScrollView } from './components/scroll-view';
-export type { IScrollViewProps, IScrollViewHandle } from './components/scroll-view';
+export type { IScrollViewProps, IScrollViewHandle, } from './components/scroll-view';
 export { TextInput } from './components/text-input';
-export type { ITextInputProps, ITextInputHandle } from './components/text-input';
+export type { ITextInputProps, ITextInputHandle, } from './components/text-input';
 export { InputAccessoryView } from './components/input-accessory-view';
 export type { IInputAccessoryViewProps } from './components/input-accessory-view';
-export { Keyboard, KEYBOARD_EVENT } from './modules/keyboard';
-export type { IKeyboardEventName } from './modules/keyboard';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
 export type { IKeyboardAvoidingViewProps, IKeyboardAvoidingBehavior, } from './components/keyboard-avoiding-view';
 export { StatusBar } from './modules/status-bar';
@@ -37,12 +35,12 @@ export type { IButtonProps } from './components/button';
 export { FlatList } from './components/flat-list';
 export type { IFlatListProps, IFlatListHandle } from './components/flat-list';
 export { SectionList } from './components/section-list';
-export type { ISectionListProps, ISectionListHandle, ISection } from './components/section-list';
+export type { ISectionListProps, ISectionListHandle, ISection, } from './components/section-list';
 export { VirtualizedSectionList } from './components/virtualized-section-list';
 export type { IVirtualizedSectionListProps, IVirtualizedSectionListHandle, } from './components/virtualized-section-list';
 export { VirtualizedList } from './components/virtualized-list';
 export type { IVirtualizedListProps, IVirtualizedListHandle, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, } from './components/virtualized-list';
-export type { IViewStyle, ITextStyle, IFlexAlign, IFlexJustify } from './utils/styles';
+export type { IViewStyle, ITextStyle, IFlexAlign, IFlexJustify, } from './utils/styles';
 export { mount, unmount } from './render';
 export { createPortal, type IPortalContainer } from './create-portal';
 export { createTunnel, type ITunnel } from './create-tunnel';
@@ -53,46 +51,23 @@ export { AppRegistry, setHostRegistrar } from './modules/app-registry';
 export type { IComponentProvider, IAppParameters, IRunnable, IHostRegistrar, IWrapperComponentProvider, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from './modules/app-registry';
 export { Animated, createAnimatedComponent } from './modules/animated';
 export { Platform, StyleSheet } from '@symbiote-native/engine';
-export { PlatformColor, DynamicColorIOS, processColor } from '@symbiote-native/engine';
+export { PlatformColor, DynamicColorIOS, processColor, } from '@symbiote-native/engine';
 export type { IColorValue, IOpaqueColorValue, IDynamicColorIOSTuple, } from '@symbiote-native/engine';
-export { setNativeViewConfigSource } from '@symbiote-native/engine';
-export type { INativeViewConfig, INativeViewConfigSource } from '@symbiote-native/engine';
+export { setNativeViewConfigSource, setColorProcessor, setDeviceEventSource, } from '@symbiote-native/engine';
+export { dlog, isDebug } from '@symbiote-native/engine';
+export type { INativeViewConfig, INativeViewConfigSource, } from '@symbiote-native/engine';
 export type { IPlatformStatic, IPlatformOSType, IPlatformConstantsIOS, IPlatformConstantsAndroid, IPlatformSelectSpec, } from '@symbiote-native/engine';
-export { Dimensions } from './modules/dimensions';
-export type { IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, } from './modules/dimensions';
-export { PixelRatio } from '@symbiote-native/engine';
-export type { IPixelRatioStatic } from '@symbiote-native/engine';
+export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, LayoutAnimation, PixelRatio, } from '@symbiote-native/engine';
+export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, IPixelRatioStatic, } from '@symbiote-native/engine';
 export { useWindowDimensions } from './hooks/use-window-dimensions';
-export { Appearance } from './modules/appearance';
-export type { IColorSchemeName, IColorSchemePreference } from './modules/appearance';
 export { useColorScheme } from './hooks/use-color-scheme';
-export { AppState } from './modules/app-state';
-export type { IAppStateStatus, IAppStateEvent } from './modules/app-state';
-export { Alert } from './modules/alert';
-export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, } from './modules/alert';
-export { ActionSheetIOS } from './modules/action-sheet-ios';
-export type { IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, } from './modules/action-sheet-ios';
-export { Linking } from './modules/linking';
-export type { IUrlEvent } from './modules/linking';
-export { Vibration } from './modules/vibration';
-export { Share } from './modules/share';
-export type { IShareContent, IShareOptions, IShareAction } from './modules/share';
 export { AccessibilityInfo } from './modules/accessibility-info';
 export type { IAccessibilityChangeEvent, IAccessibilityChangeEventName, IAccessibilityChangeEventHandler, IAccessibilityAnnouncementFinishedEvent, IAnnounceForAccessibilityOptions, IAccessibilityEventType, } from './modules/accessibility-info';
-export { I18nManager } from './modules/i18n-manager';
-export type { II18nManagerConstants } from './modules/i18n-manager';
-export { Settings } from './modules/settings';
 export { PanResponder } from '@symbiote-native/engine';
 export type { IPanResponderGestureState, IPanResponderCallbacks, IGestureResponderHandlers, IPanResponderInstance, } from '@symbiote-native/engine';
-export { LayoutAnimation } from './modules/layout-animation';
-export type { ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, } from './modules/layout-animation';
 export { InteractionManager } from '@symbiote-native/engine';
 export type { IInteractionEvent, ISimpleTask, IPromiseTask, ITask, IHandle, } from '@symbiote-native/engine';
-export { BackHandler } from './modules/back-handler';
-export type { IBackPressEventName, IBackPressHandler } from './modules/back-handler';
-export { ToastAndroid } from './modules/toast-android';
-export { PermissionsAndroid, PERMISSIONS, RESULTS } from './modules/permissions-android';
-export type { IPermission, IPermissionStatus, IRationale } from './modules/permissions-android';
 export { TouchableNativeFeedback } from './components/touchable-native-feedback';
 export type { ITouchableNativeFeedbackProps, INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from './components/touchable-native-feedback';
-export type { ISymbioteEvent } from '@symbiote-native/engine';
+export type { ISymbioteEvent, ISymbioteNode, IRootTag, } from '@symbiote-native/engine';
+export type { ICellLayout, ISeparatorProps, ISeparators, IModalOrientationChangeEvent, IPressableAndroidRippleConfig, IEnterKeyHint, IInputMode, ISubmitBehavior, ITextInputSelection, IImageStatics, } from '@symbiote-native/components';

package/build/index.js

@@ -7,7 +7,6 @@ export { ImageBackground } from './components/image-background/index.js';
 export { ScrollView } from './components/scroll-view';
 export { TextInput } from './components/text-input/index.js';
 export { InputAccessoryView } from './components/input-accessory-view/index.js';
-export { Keyboard, KEYBOARD_EVENT } from './modules/keyboard.js';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view/index.js';
 export { StatusBar } from './modules/status-bar';
 export { Switch } from './components/switch';
@@ -50,38 +49,29 @@ export { Platform, StyleSheet } from '@symbiote-native/engine';
 // Color utilities: PlatformColor / DynamicColorIOS build opaque platform colors;
 // processColor runs a color through the injected platform processor. All pure /
 // seam-backed, so they live in shared and the adapter re-exports them.
-export { PlatformColor, DynamicColorIOS, processColor } from '@symbiote-native/engine';
-// Wired once by the app entry on a real host (like setColorProcessor): hands shared
-// RN's ViewConfig registry so third-party Fabric views auto-derive their metadata:
+export { PlatformColor, DynamicColorIOS, processColor, } from '@symbiote-native/engine';
+// The three app-entry seams, wired once on a real host, so the barrel exposes them together.
+// setNativeViewConfigSource hands the engine RN's ViewConfig registry, which is how third-party
+// Fabric views auto-derive their metadata:
 //   setNativeViewConfigSource(name => ReactNativeViewConfigRegistry.get(name))
-export { setNativeViewConfigSource } from '@symbiote-native/engine';
-// Runtime modules: native-bridge consumers, same shape as Keyboard/StatusBar:
-// thin JS over getNativeModule + device events, no Fabric component of their own.
-export { Dimensions } from './modules/dimensions.js';
-export { PixelRatio } from '@symbiote-native/engine';
+export { setNativeViewConfigSource, setColorProcessor, setDeviceEventSource, } from '@symbiote-native/engine';
+// Diagnostics, gated by DEBUG (<keep_logs_gate_behind_DEBUG>): app code logs through the same
+// seam the engine does instead of a bare console.log.
+export { dlog, isDebug } from '@symbiote-native/engine';
+// Imperative runtime modules: the SAME module every adapter shares, re-exported straight from
+// @symbiote-native/engine so app code names only @symbiote-native/react (RN's single import
+// root). Thin JS over getNativeModule + device events, no Fabric component of their own.
+export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, LayoutAnimation, PixelRatio, } from '@symbiote-native/engine';
+// React lifecycle over those core device-state modules.
 export { useWindowDimensions } from './hooks/use-window-dimensions.js';
-export { Appearance } from './modules/appearance.js';
 export { useColorScheme } from './hooks/use-color-scheme.js';
-export { AppState } from './modules/app-state.js';
-export { Alert } from './modules/alert.js';
-export { ActionSheetIOS } from './modules/action-sheet-ios.js';
-export { Linking } from './modules/linking.js';
-export { Vibration } from './modules/vibration.js';
-export { Share } from './modules/share.js';
 export { AccessibilityInfo } from './modules/accessibility-info';
-export { I18nManager } from './modules/i18n-manager.js';
-export { Settings } from './modules/settings.js';
 // Interaction subsystems: gestures, deferred work, and layout transitions.
 export { PanResponder } from '@symbiote-native/engine';
-export { LayoutAnimation } from './modules/layout-animation.js';
 // InteractionManager is pure JS, so it lives in shared; re-exported here so app code
 // names only @symbiote-native/react (RN's single import root).
 export { InteractionManager } from '@symbiote-native/engine';
-// Android-only surface (the second-platform pass). Each is a thin JS shim over an
-// Android native module / Fabric view, inert on iOS (no module → graceful no-op,
-// no native view → degrade to a plain container). Native module name correctness
-// can only be confirmed on a real device/simulator, not headless tests.
-export { BackHandler } from './modules/back-handler.js';
-export { ToastAndroid } from './modules/toast-android.js';
-export { PermissionsAndroid, PERMISSIONS, RESULTS } from './modules/permissions-android.js';
+// Android-only surface (the second-platform pass): a thin JS shim over an Android Fabric view,
+// inert on iOS (no native view -> degrades to a plain container). The Android-only MODULES
+// (ToastAndroid, PermissionsAndroid, BackHandler) sit in the engine block above.
 export { TouchableNativeFeedback } from './components/touchable-native-feedback/index.js';

package/build/modules/animated/create-animated-component.js

@@ -13,8 +13,8 @@
 // and detaches on unmount / when the leaf identity changes. The per-frame path is
 // then: value.setValue / animation -> flushValue -> AnimatedProps.update() ->
 // setNativeProps(node, partial).
-import { createElement, useEffect, useMemo, useRef, } from 'react';
-import { AnimatedProps, attachNativeEventHandler, isNativeAnimatedAvailable, reduceProps, readPassthroughStyle, resolveHostNode, } from '@symbiote-native/engine';
+import { createElement, useEffect, useRef, } from 'react';
+import { createAnimatedLeafLifecycle, isSymbioteNode, isNativeAnimatedAvailable, reduceProps, readPassthroughStyle, resolveHostNode, } from '@symbiote-native/engine';
 // A ref can be a function or a `.current` object; assign through both forms without
 // casting so a forwarded ref from the caller still receives the instance. Framework-
 // ref-specific, so it stays per-adapter (the rest of the wrap helpers are shared).
@@ -33,77 +33,36 @@ export function createAnimatedComponent(Component) {
         // Native driving is opt-in per the passthrough prop AND requires a real native module;
         // headless / unsupported hosts keep the JS flush path (and the existing JS smokes green).
         const wantsNative = passthrough != null && isNativeAnimatedAvailable();
-        // One AnimatedProps leaf per distinct props object. Rebuilt when props change,
-        // so a newly-added animated value joins the graph; the effect below swaps the
-        // graph attachment to match.
-        const animatedProps = useMemo(() => new AnimatedProps(rest), [rest]);
-        // The leaf currently wired into the value graph. Tracked across renders so a swap
-        // can attach the new leaf BEFORE detaching the old one.
-        const attached = useRef(null);
-        // The committed host node, captured by the ref below. Needed in the event-attach
-        // effect (a native event binds to the node's tag, not the AnimatedProps leaf).
+        // The leaf lifecycle - build/swap/bind/detach, native event rebinding, and the
+        // rebuild-vs-skip decision - is the engine's, shared by every adapter
+        // (core/engine/src/animated/leaf-lifecycle.ts). React owns only WHEN to run it.
+        //
+        // This used to be `useMemo(() => new AnimatedProps(rest), [rest])`, which reads like the same
+        // guard but never was one: `rest` comes out of a rest-destructure, so it is a fresh object on
+        // every render and the memo's dependency always differed. The real content check now lives in
+        // the shared lifecycle.
+        const lifecycleRef = useRef(null);
+        lifecycleRef.current ??= createAnimatedLeafLifecycle('react');
+        const lifecycle = lifecycleRef.current;
+        // The committed host node, captured by the ref below - a native event binds to the node's
+        // tag, not the AnimatedProps leaf.
         const nodeRef = useRef(null);
-        // Swap the graph attachment to the current leaf, attaching the new one FIRST and
-        // detaching the previous one SECOND. Order is load-bearing: a shared Value node
-        // self-detaches (and drops its native animation node) the instant its child count
-        // hits zero, so detaching the old leaf before the new one is attached would kill a
-        // running native-driven animation on any unrelated re-render. Detaching here (not
-        // in a cleanup, which React runs BEFORE the next setup) keeps the new-before-old
-        // order, mirroring RN's AnimatedComponent._attachProps.
+        // Reconcile after every commit. No dependency array on purpose: the props object is rebuilt
+        // by every render anyway, so a dependency list could only ever say "always" - the real
+        // rebuild-vs-skip decision is the lifecycle's, and it compares CONTENT by key identity.
         useEffect(() => {
-            animatedProps.__attach();
-            const previous = attached.current;
-            attached.current = animatedProps;
-            if (previous !== null && previous !== animatedProps) {
-                previous.__detach();
-            }
-        }, [animatedProps]);
-        // Native-driver trigger. Runs after attach: push the leaf -> style -> transform
-        // -> interpolation -> value chain native so the props animate on the UI thread (no JS lag).
-        // Cascades down to the source value; the scroll event attaches to that same value
-        // (idempotent). __makeNative is idempotent, so re-firing on a leaf swap is safe.
+            lifecycle.reconcile(rest, isSymbioteNode(nodeRef.current) ? nodeRef.current : null, wantsNative);
+        });
+        // Final teardown: detach the last-attached leaf and any native event bindings on unmount.
         useEffect(() => {
-            if (wantsNative)
-                animatedProps.__makeNative();
-        }, [animatedProps, wantsNative]);
-        // Final teardown: detach the last-attached leaf when the component unmounts.
-        useEffect(() => {
-            return () => {
-                if (attached.current !== null) {
-                    attached.current.__detach();
-                    attached.current = null;
-                }
-            };
-        }, []);
-        // Native-attach any Animated.event prop, e.g. onScroll={Animated.event(…,
-        // {useNativeDriver:true})}, to the committed node, so the event drives its values on
-        // the UI thread. attachNativeEventHandler no-ops (returns undefined) unless the prop is
-        // a native event handler with a committed tag, so the JS path stays the fallback. The
-        // __makeNative cascade then carries the bound interpolations/props native too. Keyed on
-        // animatedProps (rebuilt with rest) so a new inline event re-attaches; cleanup detaches.
-        useEffect(() => {
-            const node = nodeRef.current;
-            if (node === null)
-                return;
-            const detachers = [];
-            for (const key of Object.keys(rest)) {
-                const attachment = attachNativeEventHandler(node, key, rest[key]);
-                if (attachment !== undefined)
-                    detachers.push(attachment.detach);
-            }
-            return () => {
-                for (const detach of detachers)
-                    detach();
-            };
-        }, [animatedProps]);
+            return () => lifecycle.teardown();
+        }, [lifecycle]);
         // Callback ref: when the base component mounts, capture its public instance, resolve
         // it to the underlying host node (unwrapping a scroll-container handle), record THAT
         // for the event-attach effect and bind it to the leaf, but forward the ORIGINAL
         // instance to the caller, who expects the component's public handle (scrollTo, …).
         const captureRef = (instance) => {
-            const node = resolveHostNode(instance);
-            nodeRef.current = node;
-            animatedProps.setNativeView(node);
+            nodeRef.current = resolveHostNode(instance);
             assignRef(forwardedRef, instance);
         };
         // Reduced props are P-shaped (animated nodes already replaced by values); add the
@@ -115,7 +74,9 @@ export function createAnimatedComponent(Component) {
         const passthroughStyle = readPassthroughStyle(passthrough);
         if (passthroughStyle !== undefined) {
             reduced.style =
-                reduced.style === undefined ? passthroughStyle : [reduced.style, passthroughStyle];
+                reduced.style === undefined
+                    ? passthroughStyle
+                    : [reduced.style, passthroughStyle];
         }
         const childProps = Object.assign(Object.create(null), reduced, { ref: captureRef });
         return createElement(Component, childProps);

package/build/modules/animated/index.d.ts

@@ -1,7 +1,7 @@
 import { AnimatedValue, AnimatedValueXY, AnimatedColor, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent } from '@symbiote-native/engine';
 import { createAnimatedComponent } from './create-animated-component';
 export { createAnimatedComponent } from './create-animated-component';
-export { AnimatedProps, AnimatedStyle, AnimatedTransform } from '@symbiote-native/engine';
+export { AnimatedProps, AnimatedStyle, AnimatedTransform, } from '@symbiote-native/engine';
 export declare const Animated: {
     Value: typeof AnimatedValue;
     ValueXY: typeof AnimatedValueXY;

package/build/modules/animated/index.js

@@ -14,7 +14,7 @@ import { AnimatedMock } from '@symbiote-native/engine';
 export { createAnimatedComponent } from './create-animated-component.js';
 // The pure graph leaves now live in @symbiote-native/engine (they extend AnimatedWithChildren,
 // no React); re-exported here so @symbiote-native/react's Animated surface is unchanged.
-export { AnimatedProps, AnimatedStyle, AnimatedTransform } from '@symbiote-native/engine';
+export { AnimatedProps, AnimatedStyle, AnimatedTransform, } from '@symbiote-native/engine';
 // View/Text/Image are pure host primitives, so wrap them eagerly.
 const AnimatedView = createAnimatedComponent(View);
 const AnimatedText = createAnimatedComponent(Text);

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

@@ -10,7 +10,7 @@
 // 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';
+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

package/build/render.js

@@ -1,10 +1,34 @@
 // 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 { createSurface, disposeRoot, setEventDispatcher, dlog, } from '@symbiote-native/engine';
+import { createSurface, disposeRoot, setEventDispatcher, dlog, reportUncaughtError, } from '@symbiote-native/engine';
 import reconciler, { withDiscretePriority } from './host-config.js';
 import { LegacyRoot } from './reconciler-constants.js';
 const noop = () => { };
+function errorReporter(origin) {
+    return (error, info) => {
+        reportUncaughtError(error, { origin, componentStack: info.componentStack });
+    };
+}
+const onUncaughtError = errorReporter('react render (no error boundary)');
+// A boundary handled it, so it does NOT reach the native redbox — it goes to , off unless
+// DEBUG is set.
+//
+// This deliberately DIVERGES from upstream, whose nativeOnCaughtError calls the same
+// showErrorDialog as the uncaught path. The argument for upstream's choice is that the boundary
+// decides what the USER sees, not whether the developer hears. The argument against, and the one
+// this project takes: writing an ErrorBoundary IS the developer saying "I know this can throw and
+// I am handling it here". Answering that with a full-screen redbox over the fallback the app just
+// rendered contradicts the thing the app asked for, and it is the only adapter here that did it —
+// Solid's ErrorBoundary is silent, and its canary reads as correct next to React's alarming one.
+// An UNCAUGHT error still hits the redbox; the difference is exactly whether someone claimed it.
+const onCaughtError = (error, info) => {
+    dlog(() => `react render (caught by error boundary): ${String(error)}${info.componentStack ?? ''}`);
+};
+// React recovered on its own (a concurrent render retried and succeeded), so this is not fatal -
+// but it is still a real error the app swallowed a first render over. RN keeps React's
+// defaultOnRecoverableError here, which reports it globally.
+const onRecoverableError = errorReporter('react render (recovered)');
 // A native event runs the listener (which may call setState) outside React's
 // loop. Run it at discrete priority so the update takes the sync lane, then
 // flush that work synchronously to paint the result.
@@ -41,7 +65,11 @@ export function mount(rootTag, element) {
     // first) starts clean. Otherwise the stale container double-drives the surface.
     teardown(rootTag);
     const surface = createSurface(rootTag);
-    const container = reconciler.createContainer(surface, LegacyRoot, null, false, null, 'symbiote', noop, noop, noop, noop, null);
+    const container = reconciler.createContainer(surface, LegacyRoot, null, false, null, 'symbiote', onUncaughtError, onCaughtError, onRecoverableError, 
+    // onDefaultTransitionIndicator - the ONE that is genuinely a no-op. RN's own renderer says
+    // so in as many words: "Native doesn't have a default indicator" (ReactFabric.js's
+    // nativeOnDefaultTransitionIndicator).
+    noop, null);
     containers.set(rootTag, container);
     // react-reconciler 0.33 exposes updateContainerSync + flushSyncWork for an
     // immediate render/commit; @types 0.32 still lists the older updateContainer /