@symbiote-native/react 1.0.0 → 3.0.0

package/README.md

@@ -27,29 +27,28 @@ 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.
 
 ---
 
 ## Use it
 
-The app is ordinary React — it imports primitives from `@symbiote-native/react`, not `react-native`:
+The app is ordinary React — the native primitives are plain intrinsic tags, no import needed:
 
 ```jsx
 import { useState } from 'react';
-import { View, Text, Pressable } from '@symbiote-native/react';
 
 export default function App() {
   const [count, setCount] = useState(0);
   return (
-    <View style={{ padding: 24 }}>
-      <Text>Taps: {count}</Text>
-      <Pressable onPress={() => setCount(c => c + 1)}>
-        <Text>Tap me</Text>
-      </Pressable>
-    </View>
+    <view style={{ padding: 24 }}>
+      <text>Taps: {count}</text>
+      <pressable onPress={() => setCount(c => c + 1)}>
+        <text>Tap me</text>
+      </pressable>
+    </view>
   );
 }
 ```
@@ -102,9 +101,11 @@ the surface below.
 Every interaction commits through `@symbiote-native/engine` into Fabric, with RN's renderer never in the
 path:
 
-- **Primitives** — `View` · `Text` · `Image` · `ImageBackground` · `ScrollView` · `TextInput` ·
-  `Pressable` · `Touchable*` · `Button` · `Switch` · `Modal` · `ActivityIndicator` ·
-  `SafeAreaView` · `RefreshControl` · `FlatList` · `SectionList` · `VirtualizedList`.
+- **Primitives** — `view` · `text` · `image` · `image-background` · `scroll-view` · `text-input` ·
+  `pressable` · `touchable-opacity` / `touchable-native-feedback` / `touchable-without-feedback` /
+  `touchable-highlight` · `button` · `switch` · `modal` · `activity-indicator` ·
+  `safe-area-view` · `refresh-control` · plus the components `FlatList` · `SectionList` ·
+  `VirtualizedList`.
 - **Runtime modules** — `Platform` · `StyleSheet` (incl. `hairlineWidth`) · `Dimensions` ·
   `Appearance` · `PixelRatio` · `AppState`, plus imperative `Alert` · `ActionSheetIOS` · `Share` ·
   `Linking` · `Vibration` · `Keyboard` · `StatusBar` — each reaching its real native module on the

package/build/components/activity-indicator-props.d.ts

@@ -0,0 +1,4 @@
+import type { IActivityIndicatorProps as IActivityIndicatorBaseProps } from '@symbiote-native/components';
+export type IActivityIndicatorProps = IActivityIndicatorBaseProps & {
+    className?: string;
+};

package/build/components/{button.d.ts → button-props.d.ts}

@@ -1,6 +1,4 @@
-import { type FC } from 'react';
 import type { IButtonProps as IButtonBaseProps } from '@symbiote-native/components';
 export type IButtonProps = IButtonBaseProps & {
     className?: string;
 };
-export declare const Button: FC<IButtonProps>;

package/build/components/button-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -48,9 +48,9 @@ export function FlatList(props) {
             const key = keyExtractor ? keyExtractor(item, index) : String(index);
             // The row IS the virtualized cell, so every item in it shares the row's separators handle
             // (the divider sits between rows, not columns), like RN's multi-column FlatList.
-            return createElement('symbiote-view', { key, style: { flex: 1 } }, renderItem({ item, index, separators: info.separators }));
+            return createElement('view', { key, style: { flex: 1 } }, renderItem({ item, index, separators: info.separators }));
         });
-        return createElement('symbiote-view', { style: rowStyle }, ...cells);
+        return createElement('view', { style: rowStyle }, ...cells);
     };
     // Viewability over rows expands back to per-item tokens so the caller sees item-level
     // visibility, not row-level (shared expandRowViewability).
@@ -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/image/image-props.d.ts

@@ -0,0 +1,4 @@
+import type { IImageProps as IImageBaseProps } from '@symbiote-native/components';
+export type IImageProps = IImageBaseProps & {
+    className?: string;
+};

package/build/components/image/image-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/image-background-props.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { IImageProps } from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '../utils/styles';
+export interface IImageBackgroundProps extends Omit<IImageProps, 'style'> {
+    style?: IStyleProp<IViewStyle>;
+    imageStyle?: IStyleProp<IViewStyle> | string;
+    className?: string;
+    children?: ReactNode;
+}

package/build/components/image-background-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/input-accessory-view-props.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '../utils/styles';
+export interface IInputAccessoryViewProps extends IAccessibilityProps, IAriaProps {
+    nativeID?: string;
+    backgroundColor?: string;
+    style?: IStyleProp<IViewStyle>;
+    className?: string;
+    children?: ReactNode;
+}

package/build/components/input-accessory-view-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -10,8 +10,8 @@
 // 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 { View } from '../../components.js';
+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
 // scope: Platform.OS is fixed for the process, so recomputing it per render buys nothing.
@@ -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;
             });
@@ -86,11 +91,11 @@ export const KeyboardAvoidingView = props => {
     // 'nested' ('position') pushes the content in an inner View by `bottom: inset`; the wrapper
     // modes adjust the single wrapper directly.
     if (layout.kind === 'nested') {
-        return renderWrapper(layout.wrapperStyle, createElement(View, { style: layout.innerStyle }, children));
+        return renderWrapper(layout.wrapperStyle, createElement('view', { style: layout.innerStyle }, children));
     }
     return renderWrapper(layout.wrapperStyle, children);
     // The wrapper carries onLayout. The View FC's public props don't surface it, but
-    // `symbiote-view` routes the base layout event at runtime; widen the props through
+    // `view` routes the base layout event at runtime; widen the props through
     // a typed variable (no inline-literal excess-property check, no `as`) so the
     // onLayout reaches the host without editing View's public type.
     function renderWrapper(wrapStyle, content) {
@@ -100,6 +105,6 @@ export const KeyboardAvoidingView = props => {
             onLayout: handleLayout,
             children: content,
         };
-        return createElement(View, wrapperProps);
+        return createElement('view', wrapperProps);
     }
 };

package/build/components/modal/index.js

@@ -15,11 +15,11 @@ import { createElement, useEffect, useReducer, } from 'react';
 import { dlog } from '@symbiote-native/engine';
 import { createInitialModalState, modalReducer, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
 export const Modal = rawProps => {
-    // Modal owns its host element (symbiote-modal), so it folds aria/role here; the resolved fields
+    // 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/
     // onOrientationChange) are real ViewConfig DirectEvents, so they too ride passthrough raw.
     // className is pulled out here, like style, and applied to the CONTAINER element below — left in
-    // ...passthrough it would land on the outer symbiote-modal host instead (renderModal composes
+    // ...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
@@ -47,7 +47,7 @@ export const Modal = rawProps => {
         style,
         passthrough,
     });
-    // root = symbiote-modal > [container]; the user children nest UNDER the container View, never as
+    // root = modal > [container]; the user children nest UNDER the container View, never as
     // a direct sibling of the host (RN's modal content layout).
     const [container] = root.children;
     if (typeof container === 'string')

package/build/components/pressable/{index.d.ts → pressable-props.d.ts}

@@ -1,6 +1,5 @@
-import { type FC, type ReactNode } from 'react';
-import { type IPressState, type IPressHandler, type IRectOffset, type IPressableAndroidRippleConfig } from '@symbiote-native/components';
-import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { ReactNode } from 'react';
+import type { IAccessibilityProps, IAriaProps, IPressHandler, IPressState, IPressableAndroidRippleConfig, IRectOffset } from '@symbiote-native/components';
 import type { IStyleProp, IViewStyle } from '../../utils/styles';
 export type { IPressState, IPressableAndroidRippleConfig, } from '@symbiote-native/components';
 type IPressableStyle = IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
@@ -13,10 +12,14 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     onLongPress?: IPressHandler;
     delayLongPress?: number;
     disabled?: boolean;
+    focusable?: boolean;
     cancelable?: boolean;
+    blockNativeResponder?: boolean;
     hitSlop?: IRectOffset;
+    testOnly_pressed?: boolean;
     pressRetentionOffset?: IRectOffset;
     unstable_pressDelay?: number;
+    minPressDuration?: number;
     android_ripple?: IPressableAndroidRippleConfig;
     android_disableSound?: boolean;
     onHoverIn?: IPressHandler;
@@ -27,5 +30,3 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     className?: string;
     children?: IChildrenProp;
 }
-export declare const Pressable: FC<IPressableProps>;
-export declare const TouchablePressable: FC<IPressableProps>;

package/build/components/pressable/pressable-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/{refresh-control/index.d.ts → refresh-control-props.d.ts}

@@ -1,7 +1,8 @@
-import { type FC, type ReactNode } from 'react';
-import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { ReactNode } from 'react';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
 export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
     refreshing: boolean;
+    id?: string;
     onRefresh?: () => void | Promise<void>;
     tintColor?: string;
     title?: string;
@@ -14,4 +15,3 @@ export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
     children?: ReactNode;
     className?: string;
 }
-export declare const RefreshControl: FC<IRefreshControlProps>;

package/build/components/refresh-control-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/safe-area-view-props.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '../utils/styles';
+export interface ISafeAreaViewProps extends IAccessibilityProps, IAriaProps {
+    style?: IStyleProp<IViewStyle>;
+    id?: string;
+    className?: string;
+    children?: ReactNode;
+    onLayout?: (event: ISymbioteEvent) => void;
+}

package/build/components/safe-area-view-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/scroll-view/{shared.d.ts → scroll-view-props.d.ts}

@@ -1,12 +1,9 @@
-import { type ReactElement, type ReactNode, type RefObject } from 'react';
-import { AnimatedValue, type ISymbioteEvent, type ISymbioteNode } from '@symbiote-native/engine';
-import { type ISymbioteIntrinsic } from '@symbiote-native/components';
-import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { ReactNode } from 'react';
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
 import type { IStyleProp, IViewStyle } from '../../utils/styles';
-import { type IStickyHeaderComponentType } from './sticky-header';
 export type { IScrollViewHandle } from '@symbiote-native/components';
 type IScrollHandler = (event: ISymbioteEvent) => void;
-type ILayoutHandler = (event: ISymbioteEvent) => void;
 export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     style?: IStyleProp<IViewStyle>;
     contentContainerStyle?: IStyleProp<IViewStyle> | string;
@@ -28,7 +25,6 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
         x: number;
         y: number;
     };
-    refreshControl?: ReactElement<IClonableRefreshControl>;
     removeClippedSubviews?: boolean;
     onContentSizeChange?: (width: number, height: number) => void;
     snapToInterval?: number;
@@ -39,7 +35,6 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     disableIntervalMomentum?: boolean;
     stickyHeaderIndices?: number[];
     invertStickyHeaders?: boolean;
-    StickyHeaderComponent?: IStickyHeaderComponentType;
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     maintainVisibleContentPosition?: {
@@ -69,7 +64,7 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     fadingEdgeLength?: number;
     persistentScrollbar?: boolean;
     endFillColor?: string;
-    onLayout?: ILayoutHandler;
+    onLayout?: IScrollHandler;
     onScroll?: IScrollHandler;
     onScrollBeginDrag?: IScrollHandler;
     onScrollEndDrag?: IScrollHandler;
@@ -79,20 +74,3 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     children?: ReactNode;
     className?: string;
 }
-export interface IClonableRefreshControl {
-    style?: IStyleProp<IViewStyle>;
-    children?: ReactNode;
-}
-export interface IPreparedScrollView {
-    scrollViewIntrinsic: ISymbioteIntrinsic;
-    scrollViewBaseStyle: IStyleProp<IViewStyle> | undefined;
-    outerProps: Record<string, unknown>;
-    style: IStyleProp<IViewStyle> | undefined;
-    layoutSplitStyle: IStyleProp<IViewStyle>;
-    content: ReactElement;
-    refreshControl: ReactElement<IClonableRefreshControl> | undefined;
-    scrollAnimatedValue: AnimatedValue;
-    nativeStickyAvailable: boolean;
-}
-export declare function usePreparedScrollView(rawProps: IScrollViewProps): IPreparedScrollView;
-export declare function useNativeStickyScrollAttach(scrollNodeRef: RefObject<ISymbioteNode | null>, scrollAnimatedValue: AnimatedValue, enabled: boolean): void;

package/build/components/scroll-view/scroll-view-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import type { ISwitchProps as ISwitchBaseProps } from '@symbiote-native/components';
+export type ISwitchProps = ISwitchBaseProps & {
+    className?: string;
+};

package/build/components/switch/switch-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/text-input/text-input-props.d.ts

@@ -0,0 +1,4 @@
+import type { ITextInputProps as ITextInputBaseProps } from '@symbiote-native/components';
+export type ITextInputProps = ITextInputBaseProps & {
+    className?: string;
+};

package/build/components/text-input/text-input-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { IPressTimingProps } from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '../../utils/styles';
+import type { IPressableProps } from '../pressable/pressable-props';
+export type ITouchableBaseProps = Omit<IPressableProps, 'style' | 'children'> & IPressTimingProps & {
+    style?: IStyleProp<IViewStyle>;
+    children?: ReactNode;
+};
+export interface ITouchableOpacityProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+}
+export interface ITouchableHighlightProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+    underlayColor?: string;
+    touchSoundDisabled?: boolean;
+    testOnly_pressed?: boolean;
+    onShowUnderlay?: () => void;
+    onHideUnderlay?: () => void;
+}

package/build/components/touchable/touchable-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { INativeFeedbackBackground } from '@symbiote-native/components';
+import type { IPressableProps } from '../pressable/pressable-props';
+export type ITouchableNativeFeedbackProps = Omit<IPressableProps, 'style' | 'children'> & {
+    background?: INativeFeedbackBackground;
+    useForeground?: boolean;
+    children?: ReactNode;
+    touchSoundDisabled?: boolean;
+};

package/build/components/touchable-native-feedback/touchable-native-feedback-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+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/touchable-without-feedback/touchable-without-feedback-props.js

@@ -0,0 +1 @@
+export {};