@symbiote-native/react 3.0.2 → 3.0.4

package/README.md

@@ -22,43 +22,75 @@ adapter, not the core.
 
 ## Install
 
+```bash
+npx @symbiote-native/cli new my-app --framework react
+```
+
+One command, nothing to wire by hand: scaffolds the Metro config, the entry seam below, and
+`@symbiote-native/react`/`react-native`/`react` as your app's own dependencies.
+
+<details>
+<summary>Manual install (no generator — an existing app, or you want to wire it yourself)</summary>
+
 ```bash
 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. `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.
+them, it only replaces the JS renderer that drives them. Follow [`examples/react`](../../examples/react)
+for the Metro config and the entry seam below; there is no wiring script for an existing app.
+
+</details>
 
 ---
 
 ## Use it
 
-The app is ordinary React — the native primitives are plain intrinsic tags, no import needed:
+The app is ordinary React — the native primitives are plain intrinsic tags, no import needed.
+Styling is a CSS class against a plain `.css` file, the convention every example app here
+follows (`StyleSheet.create` still works, but isn't what any example uses):
 
 ```jsx
 import { useState } from 'react';
+import './App.css';
 
 export default function App() {
   const [count, setCount] = useState(0);
   return (
-    <view style={{ padding: 24 }}>
+    <safe-area-view className="screen">
       <text>Taps: {count}</text>
       <pressable onPress={() => setCount(c => c + 1)}>
         <text>Tap me</text>
       </pressable>
-    </view>
+    </safe-area-view>
   );
 }
 ```
 
+```css
+/* App.css */
+.screen {
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+```
+
+<details>
+<summary>Native entry point (index.js) — already scaffolded by <code>npx @symbiote-native/cli new</code></summary>
+
 The zero-config entry wires the RN-backed host seams (colors, images, device events,
 third-party ViewConfigs) and registers the app in one call — this is what
 [`examples/react`](../../examples/react) actually uses:
 
 ```js
 // index.js
+
+// Registers host behaviors (Image, Pressable, Switch, ...) that /bootstrap alone doesn't
+// reach; deleting this breaks them silently (Metro's production inlineRequires makes a
+// side-effect-only barrel import go lazy, see register.ts).
+import '@symbiote-native/react';
 import { registerApp } from '@symbiote-native/react/bootstrap';
 import App from './App';
 import { name as appName } from './app.json';
@@ -91,6 +123,8 @@ AppRegistry.registerRunnable(appName, ({ rootTag }) => {
 });
 ```
 
+</details>
+
 Either way, the full canary ([`App.tsx`](../../examples/react/App.tsx)) exercises every block of
 the surface below.
 
@@ -141,8 +175,9 @@ the future scaffolder).
 
 ## Run it
 
-[`examples/react`](../../examples/react) is a stock React Native 0.86 app. Requires Node ≥ 22 and
-the [RN environment setup](https://reactnative.dev/docs/set-up-your-environment) (Xcode, CocoaPods):
+[`examples/react`](../../examples/react) is a stock React Native 0.86 app. Requires Node ≥ 22.13
+(react-native 0.86's own `package.json#engines`) and the [RN environment
+setup](https://reactnative.dev/docs/set-up-your-environment) (Xcode, CocoaPods):
 
 ```bash
 cd examples/react

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

@@ -68,7 +68,7 @@ export const KeyboardAvoidingView = props => {
             for (const subscription of subscriptions)
                 subscription.remove();
         };
-    }, [behavior, keyboardVerticalOffset]);
+    }, [behavior, keyboardVerticalOffset, enabled]);
     const handleLayout = (event) => {
         const frame = readLayoutFrame(event.nativeEvent.layout);
         if (frame !== undefined) {

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

@@ -146,7 +146,7 @@ export function VirtualizedList(props) {
         }
         dlog(`VirtualizedList scrollTo offset=${clamped} pending-ref (horizontal=${isHorizontal})`);
         setCommandedOffset(target);
-    }, []);
+    }, [scrollHandle]);
     // dispatch and runEffects are mutually recursive (a schedule-refill / fire-viewable effect
     // dispatches a follow-up action), so runEffects reaches dispatch through a ref.
     const dispatchRef = useRef(() => { });
@@ -436,21 +436,13 @@ export function VirtualizedList(props) {
                 index: planCell.index,
                 separators: makeSeparators(planCell.index),
             });
-            // RN renders the separator INSIDE the cell's own measuring wrapper
-            // (VirtualizedListCellRenderer.js:218-221), and that placement is load-bearing rather than
-            // cosmetic. As a SIBLING it is an extra flex child, so the chrome between two cells becomes
-            // gap + separator + gap while a spacer collapsing that region replaces it with one gap — the
-            // leading spacer then lands every cell below it short by (separator + gap), and the content
-            // visibly jumps by that amount each time the window's first index moves. Measured at exactly
-            // 17px on device 2026-08-19 (a 1px divider under a 16px container gap); see
-            // .claude/rules/list-geometry-feedback-loop.md. Inside the wrapper it is part of the cell's
-            // measured length instead, and every cell stays exactly one child.
+            // The separator lives INSIDE the cell's own measuring wrapper, not as a sibling: a sibling
+            // is an extra flex child, so a leading-spacer collapse would land every cell below it short
+            // by (separator + gap). See .claude/rules/list-geometry-feedback-loop.md.
             const separator = 
-            // RN gates the separator on the last index of the DATA, not of the WINDOW
-            // (VirtualizedList.js:793 `const end = getItemCount(data) - 1`), and now that the separator
-            // lives INSIDE the measuring wrapper that distinction is load-bearing: gating on the window
-            // would make a cell's own measured height change as the window slides past it. Device-measured
-            // 2026-08-19 as a run of cells all shifting by exactly the divider's 1px.
+            // Gated on the last index of the DATA, not the WINDOW: since the separator lives inside
+            // the measuring wrapper, gating on the window would make a cell's own measured height
+            // change as the window slides past it.
             planCell.index < count - 1
                 ? renderSeparatorElement(ItemSeparatorComponent, item, getItem(data, planCell.index + 1), separatorOverridesRef.current.get(planCell.index))
                 : undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/react",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "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.1.0",
-    "@symbiote-native/css-parser": "0.5.0"
+    "@symbiote-native/components": "3.1.2",
+    "@symbiote-native/css-parser": "0.5.2"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.3.0"
+    "@symbiote-native/engine": "^1.3.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-reconciler": "^0.32.2",
     "react": "19.2.3",
-    "@symbiote-native/engine": "1.3.0",
-    "@symbiote-native/test-utils": "0.4.2"
+    "@symbiote-native/engine": "1.3.1",
+    "@symbiote-native/test-utils": "0.4.4"
   },
   "scripts": {
     "typecheck": "tsc --build",