@symbiote-native/react 2.0.0 → 3.0.1

package/README.md

@@ -27,9 +27,9 @@ npm install @symbiote-native/react react-native react
 ```
 
 `react-native` and `react` stay your app's own top-level dependencies — SymbioteNative doesn't hide
-them, it only replaces the JS renderer that drives them. There's no `create-symbiote` scaffolder
-yet, so the Metro config and the `index.js` entry seam below come from
-[`examples/react`](../../examples/react) rather than a generator.
+them, it only replaces the JS renderer that drives them. `npx @symbiote-native/cli new --framework react`
+scaffolds the Metro config and the `index.js` entry seam below for a new app; wiring them into an
+existing one still follows [`examples/react`](../../examples/react) rather than a generator.
 
 ---
 

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

@@ -80,7 +80,7 @@ export function FlatList(props) {
         getItem: (_source, index) => rows[index],
         getItemCount: () => rows.length,
         renderItem: renderRow,
-        keyExtractor: rowKeyExtractor,
+        keyExtractor: (row) => rowKeyExtractor(row, keyExtractor),
         onViewableItemsChanged: rowOnViewableItemsChanged,
         viewabilityConfigCallbackPairs: rowViewabilityPairs,
         ItemSeparatorComponent: rowSeparatorComponent,

package/build/components/keyboard-avoiding-view/index.js

@@ -10,7 +10,7 @@
 // around its children.
 import { createElement, useEffect, useRef, useState, } from 'react';
 import { dlog, Keyboard, Platform, } from '@symbiote-native/engine';
-import { computeInset, keyboardAvoidingEventNamesFor, readKeyboardFrame, readLayoutFrame, readPrefersCrossFadeTransitions, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+import { computeInset, configureKeyboardAvoidingAnimation, keyboardAvoidingEventNamesFor, readKeyboardAnimationTiming, readKeyboardFrame, readLayoutFrame, readPrefersCrossFadeTransitions, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
 import {} from '../../components.js';
 // The two notifications to subscribe to, per host (iOS takes the `will` pair so the view rides
 // up with the keyboard animation; Android has no will-notifications). Resolved ONCE at module
@@ -47,6 +47,11 @@ export const KeyboardAvoidingView = props => {
                     previousInset,
                     prefersCrossFadeTransitions: prefersCrossFadeRef.current,
                 });
+                // RN's `_updateBottomIfNecessary` skips the animation entirely when the inset did not
+                // change (`if (this._bottom === height) return;`) — arming a transition for a value that
+                // moves nowhere would only ever animate other props the app changed this frame.
+                if (next !== previousInset)
+                    configureKeyboardAvoidingAnimation(readKeyboardAnimationTiming(payload), enabled);
                 dlog(`KeyboardAvoidingView show -> inset ${next}`);
                 return next;
             });

package/build/components/pressable/pressable-props.d.ts

@@ -14,7 +14,9 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     disabled?: boolean;
     focusable?: boolean;
     cancelable?: boolean;
+    blockNativeResponder?: boolean;
     hitSlop?: IRectOffset;
+    testOnly_pressed?: boolean;
     pressRetentionOffset?: IRectOffset;
     unstable_pressDelay?: number;
     minPressDuration?: number;

package/build/components/touchable/touchable-props.d.ts

@@ -12,6 +12,8 @@ export interface ITouchableOpacityProps extends ITouchableBaseProps {
 export interface ITouchableHighlightProps extends ITouchableBaseProps {
     activeOpacity?: number;
     underlayColor?: string;
+    touchSoundDisabled?: boolean;
+    testOnly_pressed?: boolean;
     onShowUnderlay?: () => void;
     onHideUnderlay?: () => void;
 }

package/build/components/touchable-native-feedback/touchable-native-feedback-props.d.ts

@@ -5,4 +5,5 @@ export type ITouchableNativeFeedbackProps = Omit<IPressableProps, 'style' | 'chi
     background?: INativeFeedbackBackground;
     useForeground?: boolean;
     children?: ReactNode;
+    touchSoundDisabled?: boolean;
 };

package/build/components/touchable-without-feedback/touchable-without-feedback-props.d.ts

@@ -3,4 +3,5 @@ import type { IPressTimingProps } from '@symbiote-native/components';
 import type { IPressableProps } from '../pressable/pressable-props';
 export type ITouchableWithoutFeedbackProps = Omit<IPressableProps, 'style' | 'children'> & IPressTimingProps & {
     children?: ReactNode;
+    touchSoundDisabled?: boolean;
 };

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

@@ -38,7 +38,7 @@
 // nothing else about it.
 import { createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, } from 'react';
 import { dlog, } from '@symbiote-native/engine';
-import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
+import { DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
 function resolveElement(component) {
     if (component === undefined)
         return undefined;
@@ -65,7 +65,7 @@ function renderSeparatorElement(component, leadingItem, trailingItem, overrides)
 // generic). The ref is destructured here and wired through useImperativeHandle.
 export function VirtualizedList(props) {
     const forwardedRef = props.ref;
-    const { data, getItem, getItemCount, renderItem, keyExtractor, getItemLayout, ItemSeparatorComponent, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, horizontal = false, inverted = false, extraData, onEndReached, onEndReachedThreshold = DEFAULT_END_REACHED_THRESHOLD, onStartReached, onStartReachedThreshold = DEFAULT_START_REACHED_THRESHOLD, onRefresh, refreshing, progressViewOffset, onViewableItemsChanged, viewabilityConfig, viewabilityConfigCallbackPairs, onScrollToIndexFailed, initialNumToRender = DEFAULT_INITIAL_NUM_TO_RENDER, initialScrollIndex, maxToRenderPerBatch = DEFAULT_MAX_TO_RENDER_PER_BATCH, updateCellsBatchingPeriod = DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, windowSize = DEFAULT_WINDOW_SIZE, stickyHeaderIndices, maintainVisibleContentPosition, style, contentContainerStyle, 
+    const { data, getItem, getItemCount, renderItem, keyExtractor, getItemLayout, ItemSeparatorComponent, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, horizontal = false, inverted = false, extraData, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, onRefresh, refreshing, progressViewOffset, onViewableItemsChanged, viewabilityConfig, viewabilityConfigCallbackPairs, onScrollToIndexFailed, initialNumToRender = DEFAULT_INITIAL_NUM_TO_RENDER, initialScrollIndex, maxToRenderPerBatch = DEFAULT_MAX_TO_RENDER_PER_BATCH, updateCellsBatchingPeriod = DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, windowSize = DEFAULT_WINDOW_SIZE, stickyHeaderIndices, maintainVisibleContentPosition, style, contentContainerStyle, 
     // Pulled out of the rest so the user's onScroll does NOT arrive raw via
     // ...accessibilityRest and overwrite the internal windowing handler. Composed below.
     onScroll: userOnScroll, onScrollBeginDrag, onScrollEndDrag, onMomentumScrollBegin, onMomentumScrollEnd, scrollEventThrottle, keyboardShouldPersistTaps, keyboardDismissMode, 
@@ -188,8 +188,12 @@ export function VirtualizedList(props) {
                     const info = effect.info;
                     const map = effect.map;
                     const fire = () => {
-                        for (const pair of pairs)
-                            pair.onViewableItemsChanged(info);
+                        for (const pair of pairs) {
+                            pair.onViewableItemsChanged({
+                                ...info,
+                                viewabilityConfig: pair.viewabilityConfig,
+                            });
+                        }
                         dispatchRef.current({ kind: 'viewable-fired', map });
                     };
                     if (viewableTimerRef.current !== null) {

package/build/host-config.js

@@ -16,10 +16,9 @@ import { descriptorFor } from '@symbiote-native/components';
 // A bare intrinsic tag has no wrapper to apply RN's per-primitive prop folds (id -> nativeID,
 // Text's ellipsizeMode / allowFontScaling defaults), so the renderer is the layer that must.
 // Shared with every other adapter, driven by the same HOST_PRIMITIVES spec.
-import { foldHostBag } from '@symbiote-native/components/fold-host-bag';
-// WHICH native view a primitive commits can depend on a prop (TextInput's `multiline`). A lowering
-// transform decides that from source text; a bare tag has no transform, so the choice is made here,
-// where the runtime value is known. Identity for every primitive that declares no alternative.
+// WHICH native view a primitive commits can depend on a prop (TextInput's `multiline`), and that
+// prop can be a runtime value — so the choice is made here, where it is known. Identity for every
+// primitive that declares no alternative.
 import { resolveIntrinsicTag } from '@symbiote-native/components/resolve-intrinsic';
 // React-reserved prop keys that must never reach Fabric. `children` is the element
 // tree (handled via appendChild). `ref`/`key` are React 19 plain props: the reconciler
@@ -30,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) {
@@ -44,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);
     }
@@ -117,12 +132,8 @@ const reconciler = createReconciler({
         // other four adapters all pass it (vue `renderer/index.ts`, svelte `dom-shim/element.ts`,
         // solid `renderer.ts`, angular `renderer/index.ts`), and React is the one that did not.
         //
-        // Inert on landing and deliberately so — nothing registers a behavior under a tag React emits.
-        // The `-managed` split is what keeps it inert once something does: React's TextInput and
-        // Switch wrappers emit `text-input-managed` / `switch-managed`, so a machine
-        // registered on the lowered tag cannot also attach to a wrapper-built node and run twice.
         const node = createElement(descriptor.component, descriptor.isText, tag);
-        applyProps(node, foldHostBag(type, props));
+        applyProps(node, props);
         return node;
     },
     createTextInstance(text, _container, hostContext) {
@@ -159,9 +170,7 @@ const reconciler = createReconciler({
         // an update. The node keeps its identity — an app's ref stays live — and the commit walk
         // re-creates the Fabric node because its viewName no longer matches the committed one.
         setNodeComponent(node, descriptorFor(resolveIntrinsicTag(type, newProps)).component);
-        // BOTH sides folded, or the diff compares a raw `id` against a folded `nativeID` and writes
-        // the alias twice while never clearing the raw key.
-        applyUpdate(node, foldHostBag(type, oldProps), foldHostBag(type, newProps));
+        applyUpdate(node, oldProps, newProps);
     },
     commitTextUpdate(node, _oldText, newText) {
         setText(node, newText);

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

@@ -6,25 +6,7 @@ export declare const Animated: {
     Value: typeof AnimatedValue;
     ValueXY: typeof AnimatedValueXY;
     Color: typeof AnimatedColor;
-    Easing: {
-        step0(n: number): number;
-        step1(n: number): number;
-        linear(t: number): number;
-        ease(t: number): number;
-        quad(t: number): number;
-        cubic(t: number): number;
-        poly(n: number): import("@symbiote-native/engine").IEasingFunction;
-        sin(t: number): number;
-        circle(t: number): number;
-        exp(t: number): number;
-        elastic(bounciness?: number): import("@symbiote-native/engine").IEasingFunction;
-        back(s?: number): import("@symbiote-native/engine").IEasingFunction;
-        bounce(t: number): number;
-        bezier(x1: number, y1: number, x2: number, y2: number): import("@symbiote-native/engine").IEasingFunction;
-        in(easing: import("@symbiote-native/engine").IEasingFunction): import("@symbiote-native/engine").IEasingFunction;
-        out(easing: import("@symbiote-native/engine").IEasingFunction): import("@symbiote-native/engine").IEasingFunction;
-        inOut(easing: import("@symbiote-native/engine").IEasingFunction): import("@symbiote-native/engine").IEasingFunction;
-    };
+    Easing: import("@symbiote-native/engine").IEasing;
     timing: typeof timing;
     spring: typeof spring;
     decay: typeof decay;
@@ -48,4 +30,32 @@ export declare const Animated: {
     FlatList: ReturnType<typeof createAnimatedComponent>;
     SectionList: ReturnType<typeof createAnimatedComponent>;
     createAnimatedComponent: typeof createAnimatedComponent;
+} | {
+    Value: typeof AnimatedValue;
+    ValueXY: typeof AnimatedValueXY;
+    Color: typeof AnimatedColor;
+    Easing: import("@symbiote-native/engine").IEasing;
+    timing: (value: AnimatedValue, config: import("@symbiote-native/engine").ITimingConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    spring: (value: AnimatedValue, config: import("@symbiote-native/engine").ISpringConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    decay: (_value: AnimatedValue, _config: import("@symbiote-native/engine").IDecayConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    parallel: (animations: import("@symbiote-native/engine").ICompositeAnimation[], _config?: import("@symbiote-native/engine").IParallelConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    sequence: (animations: import("@symbiote-native/engine").ICompositeAnimation[]) => import("@symbiote-native/engine").ICompositeAnimation;
+    stagger: (_time: number, animations: import("@symbiote-native/engine").ICompositeAnimation[]) => import("@symbiote-native/engine").ICompositeAnimation;
+    loop: (_animation: import("@symbiote-native/engine").ICompositeAnimation) => import("@symbiote-native/engine").ICompositeAnimation;
+    delay: (_time: number) => import("@symbiote-native/engine").ICompositeAnimation;
+    add: typeof add;
+    subtract: typeof subtract;
+    multiply: typeof multiply;
+    divide: typeof divide;
+    modulo: typeof modulo;
+    diffClamp: typeof diffClamp;
+    event: typeof event;
+    forkEvent: typeof forkEvent;
+    unforkEvent: typeof unforkEvent;
+    View: import("react").ComponentType<import("./create-animated-component").IAnimatedComponentProps>;
+    Text: import("react").ComponentType<import("./create-animated-component").IAnimatedComponentProps>;
+    Image: import("react").ComponentType<import("./create-animated-component").IAnimatedComponentProps>;
+    FlatList: ReturnType<typeof createAnimatedComponent>;
+    SectionList: ReturnType<typeof createAnimatedComponent>;
+    createAnimatedComponent: typeof createAnimatedComponent;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/react",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "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": "2.0.0",
+    "@symbiote-native/components": "3.0.1",
     "@symbiote-native/css-parser": "0.5.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^0.5.0"
+    "@symbiote-native/engine": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-reconciler": "^0.32.2",
     "react": "19.2.3",
-    "@symbiote-native/engine": "0.5.0",
-    "@symbiote-native/test-utils": "0.3.0"
+    "@symbiote-native/engine": "1.2.0",
+    "@symbiote-native/test-utils": "0.4.1"
   },
   "scripts": {
     "typecheck": "tsc --build",