@symbiote-native/react 3.0.2 → 3.0.3

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(() => { });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/react",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "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,8 +57,8 @@
   },
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@symbiote-native/components": "3.1.0",
-    "@symbiote-native/css-parser": "0.5.0"
+    "@symbiote-native/components": "3.1.1",
+    "@symbiote-native/css-parser": "0.5.1"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -70,7 +70,7 @@
     "@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/test-utils": "0.4.3"
   },
   "scripts": {
     "typecheck": "tsc --build",