@symbiote-native/react 3.0.0 → 3.0.2

package/build/components/flat-list/index.d.ts

@@ -66,6 +66,8 @@ export interface IFlatListProps<ItemT> extends IAccessibilityProps, IAriaProps {
     style?: IStyleProp<IViewStyle>;
     contentContainerStyle?: IStyleProp<IViewStyle>;
     className?: string;
+    removeClippedSubviews?: boolean;
+    nestedScrollEnabled?: boolean;
 }
 export declare function FlatList<ItemT>(props: IFlatListProps<ItemT> & {
     ref?: Ref<IFlatListHandle>;

package/build/components/flat-list/index.js

@@ -6,8 +6,8 @@
 // transforms are shared from @symbiote-native/components. This file only adapts to React's lifecycle
 // (element creation + ref threading).
 import { createElement, } from 'react';
-import { dlog, resolveClassName, } from '@symbiote-native/engine';
-import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, rowKeyExtractor, } from '@symbiote-native/components';
+import { Platform, dlog, resolveClassName, } from '@symbiote-native/engine';
+import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, removeClippedSubviewsOrDefault, rowKeyExtractor, } from '@symbiote-native/components';
 import { VirtualizedList, } from '../virtualized-list/index.js';
 export function FlatList(props) {
     const { ref, data, renderItem, keyExtractor, numColumns = SINGLE_COLUMN, columnWrapperStyle, 
@@ -16,7 +16,12 @@ export function FlatList(props) {
     onViewableItemsChanged, viewabilityConfigCallbackPairs, 
     // ItemSeparatorComponent is typed on ItemT; the multi-column stream is IRow<ItemT>, so it is
     // wrapped there to unwrap rows back to items, exactly like viewability above.
-    ItemSeparatorComponent, ...rest } = props;
+    ItemSeparatorComponent, removeClippedSubviews: authoredRemoveClippedSubviews, ...ownRest } = props;
+    // FlatList.js always sends it, defaulted per platform.
+    const rest = {
+        ...ownRest,
+        removeClippedSubviews: removeClippedSubviewsOrDefault(authoredRemoveClippedSubviews, Platform.OS),
+    };
     dlog(`FlatList over ${data.length} items, ${numColumns} column(s)`);
     if (numColumns <= SINGLE_COLUMN) {
         return createElement((VirtualizedList), {

package/build/components/modal/index.js

@@ -12,8 +12,8 @@
 // through the exit transition. The native exit-animation timing is what's deferred, not the
 // callback contract.
 import { createElement, useEffect, useReducer, } from 'react';
-import { dlog } from '@symbiote-native/engine';
-import { createInitialModalState, modalReducer, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
+import { dlog, Platform } from '@symbiote-native/engine';
+import { createInitialModalState, isModalVisible, modalReducer, modalVisibilityAction, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
 export const Modal = rawProps => {
     // Modal owns its host element (modal), so it folds aria/role here; the resolved fields
     // ride the host node via `...passthrough`. The events (onShow/onDismiss/onRequestClose/
@@ -21,18 +21,26 @@ export const Modal = rawProps => {
     // className is pulled out here, like style, and applied to the CONTAINER element below — left in
     // ...passthrough it would land on the outer modal host instead (renderModal composes
     // `style` into the container's style, not the host's).
-    const { visible, transparent, backdropColor, animationType, presentationStyle, supportedOrientations, hardwareAccelerated, statusBarTranslucent, navigationBarTranslucent, allowSwipeDismissal, style, className, children, ...passthrough } = resolveAccessibilityProps(rawProps);
-    // The iOS keep-alive: the effect runs AFTER this render, so a visible→hidden transition keeps the
-    // node mounted for one frame (state.isRendered still true here) before the next render unmounts it,
-    // the same shape as RN's componentDidUpdate setState (see state/modal.ts).
-    const [state, dispatch] = useReducer(modalReducer, visible === true, createInitialModalState);
+    const { visible, transparent, backdropColor, animationType, presentationStyle, supportedOrientations, hardwareAccelerated, statusBarTranslucent, navigationBarTranslucent, allowSwipeDismissal, style, className, children, onDismiss, ...passthrough } = resolveAccessibilityProps(rawProps);
+    // The iOS keep-alive (state/modal.ts): armed on show, dropped only by the native dismiss below.
+    const isVisible = isModalVisible(visible);
+    const [state, dispatch] = useReducer(modalReducer, isVisible, createInitialModalState);
     useEffect(() => {
-        dispatch(visible === true ? { type: 'show' } : { type: 'hide' });
-    }, [visible]);
-    if (!shouldRenderModal(visible === true, state)) {
+        const action = modalVisibilityAction(isVisible);
+        if (action !== undefined)
+            dispatch(action);
+    }, [isVisible]);
+    if (!shouldRenderModal(isVisible, state)) {
         dlog('Modal hidden -> no node committed');
         return null;
     }
+    // Modal.js: onDismiss is iOS-only — it drops the keep-alive, then tells the app.
+    const handleDismiss = () => {
+        if (Platform.OS !== 'ios')
+            return;
+        dispatch({ type: 'hide' });
+        onDismiss?.();
+    };
     const root = renderModal({
         visible,
         transparent,
@@ -45,7 +53,7 @@ export const Modal = rawProps => {
         navigationBarTranslucent,
         allowSwipeDismissal,
         style,
-        passthrough,
+        passthrough: { ...passthrough, onDismiss: handleDismiss },
     });
     // root = modal > [container]; the user children nest UNDER the container View, never as
     // a direct sibling of the host (RN's modal content layout).

package/build/components/virtualized-list/index.d.ts

@@ -64,6 +64,8 @@ export interface IVirtualizedListProps<ItemT> extends IAccessibilityProps, IAria
     scrollEventThrottle?: number;
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    removeClippedSubviews?: boolean;
+    nestedScrollEnabled?: boolean;
     style?: IStyleProp<IViewStyle>;
     contentContainerStyle?: IStyleProp<IViewStyle>;
     className?: string;

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

@@ -491,8 +491,9 @@ export function VirtualizedList(props) {
     const resolvedContentContainerStyle = horizontal
         ? [contentContainerStyle, { width: total }]
         : contentContainerStyle;
+    // VirtualizedList.js: `[inversionStyle, style]` — the app's style can override the flip.
     const resolvedStyle = inverted
-        ? [style, horizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE]
+        ? [horizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE, style]
         : style;
     const scrollProps = {
         // The list's accessibility surface rides down onto the ScrollView. Spread first so the
@@ -507,6 +508,9 @@ export function VirtualizedList(props) {
     // scrolls the two axes with different native ViewManagers. The behavior's own fold deletes the
     // prop and rewrites it from the tag, so passing it would be at best redundant and at worst a
     // contradiction it has to warn about.
+    // VirtualizedList.js:1111 — Android moves the scrollbar back after the `scale: -1` flip.
+    if (inverted)
+        scrollProps.isInvertedVirtualizedList = true;
     if (onScrollBeginDrag !== undefined)
         scrollProps.onScrollBeginDrag = onScrollBeginDrag;
     if (onScrollEndDrag !== undefined)

package/build/components/virtualized-section-list/index.d.ts

@@ -62,6 +62,8 @@ export interface IVirtualizedSectionListProps<ItemT> extends IAccessibilityProps
     scrollEventThrottle?: number;
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    removeClippedSubviews?: boolean;
+    nestedScrollEnabled?: boolean;
     style?: IStyleProp<IViewStyle>;
     contentContainerStyle?: IStyleProp<IViewStyle>;
     className?: string;

package/build/host-config.js

@@ -29,11 +29,24 @@ import { resolveIntrinsicTag } from '@symbiote-native/components/resolve-intrins
 function isReservedProp(key) {
     return key === 'children' || key === 'ref' || key === 'key';
 }
+/**
+ * `Object.keys`, not `Object.entries`, and it is measured rather than stylistic.
+ *
+ * `entries` allocates the outer array AND a two-element array per key, eagerly, before the loop
+ * starts; `keys` allocates one array of strings and the lookup is a property read the engine is
+ * about to do anyway. This runs ONCE PER NODE CREATED — ten thousand times on a thousand-row create.
+ * Priced on `-O` Hermes by `object-iteration-cost.itest.ts` over a four-key bag: 0.42 us against
+ * 0.23, so **0.19 us per node, ~1.9 ms of a 102 ms create**.
+ *
+ * `for…in` is cheaper still (0.14) and is NOT used: it walks the prototype chain, and an inherited
+ * key would be routed as a prop. A reconciler's props object has no prototype today, which is a fact
+ * about today rather than a contract.
+ */
 function applyProps(node, props) {
-    for (const [key, value] of Object.entries(props)) {
+    for (const key of Object.keys(props)) {
         if (isReservedProp(key))
             continue;
-        routeProp(node, key, value);
+        routeProp(node, key, props[key]);
     }
 }
 function applyUpdate(node, oldProps, newProps) {
@@ -43,9 +56,12 @@ function applyUpdate(node, oldProps, newProps) {
         if (!Object.hasOwn(newProps, key))
             routeProp(node, key, undefined);
     }
-    for (const [key, value] of Object.entries(newProps)) {
+    // Same `Object.keys` reason as `applyProps` above — this walk runs once per UPDATED node, which on
+    // a `partial` step is every row on the screen.
+    for (const key of Object.keys(newProps)) {
         if (isReservedProp(key))
             continue;
+        const value = newProps[key];
         if (value !== oldProps[key])
             routeProp(node, key, value);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/react",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "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,20 +57,20 @@
   },
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@symbiote-native/components": "3.0.0",
+    "@symbiote-native/components": "3.1.0",
     "@symbiote-native/css-parser": "0.5.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.0.0"
+    "@symbiote-native/engine": "^1.3.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-reconciler": "^0.32.2",
     "react": "19.2.3",
-    "@symbiote-native/engine": "1.0.0",
-    "@symbiote-native/test-utils": "0.3.1"
+    "@symbiote-native/engine": "1.3.0",
+    "@symbiote-native/test-utils": "0.4.2"
   },
   "scripts": {
     "typecheck": "tsc --build",