@symbiote-native/components 0.5.0 → 2.0.0

package/build/scroll-view-commands.js

@@ -3,7 +3,7 @@
 // the Android RefreshControl wrap, the scroll-event guard/forwarder, and the native sticky
 // scroll-attach are all platform- and framework-invariant, so they live here. The adapter
 // supplies the lifecycle (the node getter, the effect) and re-exports these.
-import { attachNativeEvent, dispatchViewCommand, dlog, flattenStyle, isSymbioteEvent, } from '@symbiote-native/engine';
+import { attachNativeEvent, dlog, flattenStyle, isSymbioteEvent, } from '@symbiote-native/engine';
 // RN's splitLayoutProps key partition (StyleSheet/splitLayoutProps.js): the LAYOUT keys
 // that belong on the OUTER box when a layout-affecting wrapper sits between the laid-out
 // frame and the visual content. Everything NOT in this set (background*, padding*, border*,
@@ -58,6 +58,24 @@ export function splitLayoutProps(style) {
     }
     return { outer, inner };
 }
+// The whole Android wrap style decision: the layout/visual split, AND the axis base composed onto
+// BOTH boxes. RN does the second half too (`StyleSheet.compose(baseStyle, outer)` beside
+// `compose(baseStyle, inner)`, ScrollView.js:1856), and every adapter had dropped it from the
+// wrapper — so an AndroidSwipeRefreshLayout with no explicit user layout style lost `flexGrow: 1`
+// and collapsed to its content height inside a flex parent, where RN's grows.
+//
+// One function rather than five call sites composing `[base, outer]` by hand, because that is what
+// the last one drifted into: a fold written inline is invisible to
+// `tests/lowered-primitive-fold-parity.test.ts`, whose oracle is shared value imports.
+// `style` is `unknown` rather than `IStyleProp`, because a `payloadFold` reads it off an untyped
+// props bag and `flattenStyle` — the only thing that touches it here — already takes `unknown`.
+// Narrowing it would buy a guard at every fold call site and no safety.
+export function splitScrollViewStyle(base, style) {
+    const { outer, inner } = splitLayoutProps(flattenStyle(style));
+    // Base UNDER the split half on both, so an explicit user value still wins — the same order the
+    // unwrapped scroll view composes.
+    return { outer: [base, outer], inner: [base, inner] };
+}
 // Re-exported so the package barrel (index.ts) can still export this guard to
 // '@symbiote-native/components' callers, now that it lives in the engine, next to ISymbioteEvent.
 export { isSymbioteEvent };
@@ -69,42 +87,23 @@ export function forwardScrollEvent(handler, args) {
     if (isSymbioteEvent(first))
         handler(first);
 }
-// The imperative handle is identical across platforms: every method dispatches a view
-// command on the SAME scroll-view node; only the surrounding element assembly diverges
-// (iOS sibling RefreshControl vs Android wrap). So it is built once here and both platform
-// files back it with their scroll node getter. Commands and arg order mirror RN's
-// ScrollViewCommands: scrollTo [x, y, animated], scrollToEnd [animated], flashScrollIndicators [].
+// The imperative handle is identical across platforms — only the surrounding element assembly
+// diverges (iOS sibling RefreshControl vs Android wrap) — so it is built once here and both
+// platform files back it with their scroll node getter.
+//
+// It DELEGATES to the node's own methods rather than dispatching commands itself. The commands and
+// their defaults live on `ISymbioteNode` because a LOWERED ScrollView hands the app its engine
+// node directly, with no wrapper to build a handle: two implementations would let `scrollTo()` with
+// no argument mean one thing through a ref and another through a tag, and nothing would report it.
 //
 // `getNode` is a LAZY getter (React `() => ref.current`, Vue `() => nodeRef.value`), read on
 // every call, NOT the node captured once. The node is null at mount and only set after the
 // element commits, so an eager capture would freeze `null` and every command would no-op.
 export function buildScrollViewHandle(getNode) {
     return {
-        scrollTo: (options) => {
-            const node = getNode();
-            if (node === null)
-                return;
-            const x = options?.x ?? 0;
-            const y = options?.y ?? 0;
-            const animated = options?.animated ?? true;
-            dlog(`ScrollView.scrollTo x=${x} y=${y} animated=${animated}`);
-            dispatchViewCommand(node, 'scrollTo', [x, y, animated]);
-        },
-        scrollToEnd: (options) => {
-            const node = getNode();
-            if (node === null)
-                return;
-            const animated = options?.animated ?? true;
-            dlog(`ScrollView.scrollToEnd animated=${animated}`);
-            dispatchViewCommand(node, 'scrollToEnd', [animated]);
-        },
-        flashScrollIndicators: () => {
-            const node = getNode();
-            if (node === null)
-                return;
-            dlog('ScrollView.flashScrollIndicators');
-            dispatchViewCommand(node, 'flashScrollIndicators', []);
-        },
+        scrollTo: (options) => getNode()?.scrollTo(options),
+        scrollToEnd: (options) => getNode()?.scrollToEnd(options),
+        flashScrollIndicators: () => getNode()?.flashScrollIndicators(),
         getScrollNode: () => getNode(),
     };
 }

package/build/state/pressable.d.ts

@@ -1,5 +1,6 @@
 import { type ISymbioteEvent } from '@symbiote-native/engine';
 export declare const DEFAULT_DELAY_LONG_PRESS_MS = 500;
+export declare const DEFAULT_MIN_PRESS_DURATION_MS = 130;
 export declare const DEFAULT_PRESS_RECT_OFFSETS: {
     top: number;
     left: number;
@@ -56,19 +57,26 @@ export interface IPressRuntime {
     longPressCancel: (() => void) | undefined;
     longPressFired: boolean;
     pressDelayCancel: (() => void) | undefined;
+    pressOutCancel: (() => void) | undefined;
     pressOrigin: {
         x: number;
         y: number;
     } | undefined;
     driftedOut: boolean;
     region: IResponderRegion | undefined;
+    active: boolean;
+    activatedAt: number | undefined;
+    delayElapsed: boolean;
+    disposed: boolean;
 }
 export declare function createPressRuntime(): IPressRuntime;
+export declare function disposePressRuntime(runtime: IPressRuntime): void;
 export type IFrameCallback = (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void;
 export interface IPressHost {
     setPressed: (pressed: boolean) => void;
     getMeasureFn: () => ((callback: IFrameCallback) => void) | undefined;
     schedule: (callback: () => void, ms: number) => () => void;
+    now: () => number;
 }
 export interface IPressMachineConfig {
     onPress?: IPressHandler;
@@ -78,6 +86,7 @@ export interface IPressMachineConfig {
     onLongPress?: IPressHandler;
     delayLongPress: number;
     unstable_pressDelay: number;
+    minPressDuration?: number;
     hitSlop?: IRectOffset;
     pressRetentionOffset?: IRectOffset;
 }

package/build/state/pressable.js

@@ -11,6 +11,8 @@
 // the decision of when each callback fires) is here, shared by every adapter.
 import { dlog, Platform } from '@symbiote-native/engine';
 export const DEFAULT_DELAY_LONG_PRESS_MS = 500;
+// Pressability's default active-visual floor for a plain Pressable. Touchable* overrides this to 0.
+export const DEFAULT_MIN_PRESS_DURATION_MS = 130;
 // RN's default extra slop kept around a press once it is active, before a drift fires pressOut.
 // The PressRect extension (Pressability.js DEFAULT_PRESS_RECT_OFFSETS). Per-edge, deeper bottom.
 export const DEFAULT_PRESS_RECT_OFFSETS = {
@@ -91,11 +93,40 @@ export function createPressRuntime() {
         longPressCancel: undefined,
         longPressFired: false,
         pressDelayCancel: undefined,
+        pressOutCancel: undefined,
         pressOrigin: undefined,
         driftedOut: false,
         region: undefined,
+        active: false,
+        activatedAt: undefined,
+        delayElapsed: false,
+        disposed: false,
     };
 }
+function cancelRuntimeTimer(runtime, key) {
+    const cancel = runtime[key];
+    if (cancel === undefined)
+        return;
+    cancel();
+    runtime[key] = undefined;
+}
+// RN Pressability.reset(): cancel every timer and make any already-queued callback inert. The
+// adapter invokes this exactly once from its own unmount/destroy hook.
+export function disposePressRuntime(runtime) {
+    if (runtime.disposed)
+        return;
+    runtime.disposed = true;
+    cancelRuntimeTimer(runtime, 'longPressCancel');
+    cancelRuntimeTimer(runtime, 'pressDelayCancel');
+    cancelRuntimeTimer(runtime, 'pressOutCancel');
+    runtime.longPressFired = false;
+    runtime.pressOrigin = undefined;
+    runtime.driftedOut = false;
+    runtime.region = undefined;
+    runtime.active = false;
+    runtime.activatedAt = undefined;
+    runtime.delayElapsed = false;
+}
 // Measure the responder's on-screen frame and cache it as the retention region for the life of
 // the press (RN measures on responder grant, _measureResponderRegion). When measure is
 // unavailable (no node yet, an uncommitted node, or a host slot without a measure method,
@@ -123,7 +154,7 @@ function measureRegion(runtime, measureFn) {
 // (the React adapter's useMemo body) lives here, shared by every adapter. The adapter rebuilds
 // these per render (the closures capture the live config) while the runtime persists across them.
 export function createPressHandlers(config, runtime, host) {
-    const { onPress, onPressIn, onPressOut, onPressMove, onLongPress, delayLongPress, unstable_pressDelay, } = config;
+    const { onPress, onPressIn, onPressOut, onPressMove, onLongPress, delayLongPress, unstable_pressDelay, minPressDuration = DEFAULT_MIN_PRESS_DURATION_MS, } = config;
     // Per-edge offsets for the measured-rect retention test (RN's hitSlop + pressRectOffset).
     // pressRetentionOffset defaults to RN's DEFAULT_PRESS_RECT_OFFSETS when unset; hitSlop to zero.
     const hitSlopRect = normalizeRect(config.hitSlop);
@@ -145,20 +176,28 @@ export function createPressHandlers(config, runtime, host) {
         return (Math.hypot(point.x - origin.x, point.y - origin.y) <= fallbackThreshold);
     }
     function clearLongPress() {
-        if (runtime.longPressCancel !== undefined) {
-            runtime.longPressCancel();
-            runtime.longPressCancel = undefined;
-        }
+        cancelRuntimeTimer(runtime, 'longPressCancel');
+    }
+    function clearPressDelay() {
+        cancelRuntimeTimer(runtime, 'pressDelayCancel');
+    }
+    function clearPressOut() {
+        cancelRuntimeTimer(runtime, 'pressOutCancel');
     }
-    // The real activation: flip pressed-state on, arm the long-press timer, fire onPressIn. Split
-    // out so unstable_pressDelay can defer it behind a timer while an early release flushes it.
     function activate(event) {
+        if (runtime.disposed || runtime.active || runtime.driftedOut)
+            return;
+        // A new grant or drift-back-in supersedes a delayed out from the previous active interval.
+        clearPressOut();
+        runtime.active = true;
+        runtime.activatedAt = host.now();
         dlog('Pressable pressIn');
         host.setPressed(true);
-        runtime.longPressFired = false;
-        if (onLongPress) {
+        if (!runtime.longPressFired && onLongPress) {
             runtime.longPressCancel = host.schedule(() => {
                 runtime.longPressCancel = undefined;
+                if (runtime.disposed || !runtime.active || runtime.driftedOut)
+                    return;
                 runtime.longPressFired = true;
                 dlog('Pressable longPress timer fired');
                 onLongPress(event);
@@ -166,51 +205,99 @@ export function createPressHandlers(config, runtime, host) {
         }
         onPressIn?.(event);
     }
-    // Flush a still-pending pressDelay timer immediately, so a pressOut/press that arrives before
-    // the delay elapsed still sees an activated press.
-    function flushPressDelay(event) {
-        if (runtime.pressDelayCancel !== undefined) {
-            runtime.pressDelayCancel();
-            runtime.pressDelayCancel = undefined;
-            activate(event);
+    function deactivate(event) {
+        if (runtime.disposed || !runtime.active)
+            return;
+        runtime.active = false;
+        clearLongPress();
+        const activatedAt = runtime.activatedAt ?? host.now();
+        runtime.activatedAt = undefined;
+        const heldFor = Math.max(0, host.now() - activatedAt);
+        const wait = Math.max(minPressDuration - heldFor, 0);
+        const finish = () => {
+            runtime.pressOutCancel = undefined;
+            if (runtime.disposed)
+                return;
+            host.setPressed(false);
+            onPressOut?.(event);
+        };
+        if (wait > 0) {
+            dlog(`Pressable pressOut deferred ${wait}ms`);
+            runtime.pressOutCancel = host.schedule(finish, wait);
+        }
+        else {
+            finish();
         }
     }
+    // An honest release arrives as press then pressOut. If it beat delayPressIn, activate now so the
+    // tap still flashes and calls onPressIn; a cancelled/out-of-bounds gesture never calls this path.
+    function completePressDelay(event) {
+        if (runtime.pressDelayCancel !== undefined)
+            clearPressDelay();
+        if (!runtime.delayElapsed)
+            runtime.delayElapsed = true;
+        if (!runtime.driftedOut)
+            activate(event);
+    }
+    function resetGesture() {
+        runtime.pressOrigin = undefined;
+        runtime.region = undefined;
+        runtime.driftedOut = false;
+        runtime.delayElapsed = false;
+        runtime.longPressFired = false;
+    }
     return {
         handlePressIn(event) {
+            if (runtime.disposed)
+                return;
+            // A new grant cancels a delayed out from the prior gesture, matching Pressability's
+            // onResponderGrant -> _cancelPressOutDelayTimeout.
+            clearPressDelay();
+            clearLongPress();
+            clearPressOut();
+            runtime.active = false;
+            runtime.activatedAt = undefined;
+            runtime.longPressFired = false;
+            runtime.delayElapsed = false;
             runtime.pressOrigin = readPoint(event);
             runtime.driftedOut = false;
-            // Measure now so the move stream tests against the real frame, not a press-start radius.
             measureRegion(runtime, host.getMeasureFn());
             if (unstable_pressDelay > 0) {
                 dlog(`Pressable pressIn deferred ${unstable_pressDelay}ms`);
                 runtime.pressDelayCancel = host.schedule(() => {
                     runtime.pressDelayCancel = undefined;
-                    activate(event);
+                    if (runtime.disposed)
+                        return;
+                    runtime.delayElapsed = true;
+                    if (!runtime.driftedOut)
+                        activate(event);
                 }, unstable_pressDelay);
                 return;
             }
+            runtime.delayElapsed = true;
             activate(event);
         },
         handlePressOut(event) {
+            if (runtime.disposed)
+                return;
             dlog('Pressable pressOut');
-            flushPressDelay(event);
+            // A cancellation before delayPressIn must stay inert. An honest release already flushed the
+            // delay in handlePress, because the engine emits press immediately before pressOut.
+            clearPressDelay();
             clearLongPress();
-            runtime.pressOrigin = undefined;
-            runtime.region = undefined;
-            host.setPressed(false);
-            onPressOut?.(event);
+            deactivate(event);
+            resetGesture();
         },
         handlePress(event) {
+            if (runtime.disposed)
+                return;
             dlog('Pressable press');
-            flushPressDelay(event);
+            completePressDelay(event);
             clearLongPress();
-            // A drift past the retention region cancels the tap (RN); reset and suppress.
             if (runtime.driftedOut) {
-                runtime.driftedOut = false;
                 dlog('Pressable press suppressed by drift past retention region');
                 return;
             }
-            // A fired long press cancels the tap: reset the flag and suppress onPress.
             if (runtime.longPressFired) {
                 runtime.longPressFired = false;
                 dlog('Pressable press suppressed by prior longPress');
@@ -218,11 +305,9 @@ export function createPressHandlers(config, runtime, host) {
             }
             onPress?.(event);
         },
-        // Responder-move stream of the Pressable's own View. onPressMove fires on every move while
-        // the press is live (RN). Then the retention test: a move outside the measured region
-        // (expanded by hitSlop+pressRectOffset) fires an early pressOut and marks the tap suppressed;
-        // a move back inside re-activates.
         handleResponderMove(event) {
+            if (runtime.disposed)
+                return;
             onPressMove?.(event);
             const here = readPoint(event);
             if (!here)
@@ -232,14 +317,15 @@ export function createPressHandlers(config, runtime, host) {
                     dlog('Pressable drifted past retention region — deactivating');
                     runtime.driftedOut = true;
                     clearLongPress();
-                    host.setPressed(false);
-                    onPressOut?.(event);
+                    // Before delayPressIn there was no activation, so there is no onPressOut to emit.
+                    deactivate(event);
                 }
             }
             else if (runtime.driftedOut) {
                 dlog('Pressable returned inside retention region — reactivating');
                 runtime.driftedOut = false;
-                activate(event);
+                if (runtime.delayElapsed)
+                    activate(event);
             }
         },
     };

package/build/state/text-input.d.ts

@@ -1,4 +1,4 @@
-import type { IPlatformOSType, ISymbioteEvent, ITextStyle } from '@symbiote-native/engine';
+import type { IMeasureOnSuccess, IMeasureInWindowOnSuccess, IMeasureLayoutOnSuccess, ISymbioteNode, IPlatformOSType, ISymbioteEvent, ITextStyle } from '@symbiote-native/engine';
 import type { IAccessibilityProps, IAriaProps } from '../accessibility-props';
 export type IInputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
 export type IEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
@@ -53,6 +53,9 @@ export type IFoldedTextInputProps = {
     showSoftInputOnFocus: boolean | undefined;
 };
 export declare function resolveTextInputProps(input: ITextInputFoldInput): IFoldedTextInputProps;
+export type ITextInputChangeEvent = ISymbioteEvent & {
+    text: string;
+};
 export type ITextInputProps = IAccessibilityProps & IAriaProps & {
     value?: string;
     defaultValue?: string;
@@ -86,7 +89,7 @@ export type ITextInputProps = IAccessibilityProps & IAriaProps & {
     underlineColorAndroid?: string;
     inputAccessoryViewID?: string;
     style?: ITextStyle;
-    onValueChange?: (text: string, event: ISymbioteEvent) => void;
+    onValueChange?: (event: ITextInputChangeEvent) => void;
     onFocus?: ITextInputEventHandler;
     onBlur?: ITextInputEventHandler;
     onEndEditing?: ITextInputEventHandler;
@@ -95,10 +98,15 @@ export type ITextInputProps = IAccessibilityProps & IAriaProps & {
     onSelectionChange?: ITextInputEventHandler;
     onContentSizeChange?: ITextInputEventHandler;
 };
+export declare const TEXT_INPUT_CALLBACK_NAMES: readonly string[];
 export type ITextInputHandle = {
     focus(): void;
     blur(): void;
     clear(): void;
     isFocused(): boolean;
     setSelection(start: number, end: number): void;
+    measure(callback: IMeasureOnSuccess): void;
+    measureInWindow(callback: IMeasureInWindowOnSuccess): void;
+    measureLayout(relativeToNativeNode: ISymbioteNode | number, onSuccess: IMeasureLayoutOnSuccess, onFail?: () => void): void;
+    setNativeProps(nativeProps: Record<string, unknown>): void;
 };

package/build/state/text-input.js

@@ -230,3 +230,14 @@ export function resolveTextInputProps(input) {
             : input.showSoftInputOnFocus,
     };
 }
+const TEXT_INPUT_CALLBACKS = {
+    onValueChange: true,
+    onFocus: true,
+    onBlur: true,
+    onEndEditing: true,
+    onSubmitEditing: true,
+    onKeyPress: true,
+    onSelectionChange: true,
+    onContentSizeChange: true,
+};
+export const TEXT_INPUT_CALLBACK_NAMES = Object.keys(TEXT_INPUT_CALLBACKS);

package/build/text-props.js

@@ -1,6 +1,7 @@
 // The defaults RN's Text.js applies before handing props to native, folded once for every adapter.
 //
-// RN does this unconditionally on the outer (non-virtual) path, Text.js:288-291:
+// RN does this unconditionally on the outer (non-virtual) path, Text.js:289 and :291 (the two
+// lines between them, 288 and 290, are `accessible` and `disabled` — not part of this fold):
 //
 //   processedProps.allowFontScaling = allowFontScaling !== false;
 //   processedProps.ellipsizeMode = ellipsizeMode ?? 'tail';

package/build/view/render-button.d.ts

@@ -1,4 +1,4 @@
-import type { ITextStyle, ISymbioteEvent } from '@symbiote-native/engine';
+import type { ITextStyle, IViewStyle, ISymbioteEvent } from '@symbiote-native/engine';
 import type { IAccessibilityProps, IAriaProps } from '../accessibility-props';
 export interface IButtonProps extends IAccessibilityProps, IAriaProps {
     title: string;
@@ -16,4 +16,39 @@ export interface IButtonProps extends IAccessibilityProps, IAriaProps {
 }
 export declare const BUTTON_ACCESSIBILITY_ROLE = "button";
 export declare const buttonTextStyle: ITextStyle;
+export declare const buttonViewStyle: IViewStyle;
+/**
+ * The label style with `color` and `disabled` folded in.
+ *
+ * `color` tints the TEXT on iOS and the BUTTON on Android (Button.js:318-324), so on Android this
+ * ignores it — see `resolveButtonViewStyle`, which is where it lands there. `disabled` wins over
+ * `color` on both, because RN pushes `textDisabled` after the tint.
+ */
 export declare function resolveButtonTextStyle(color: string | undefined, disabled: boolean | undefined): ITextStyle;
+/**
+ * The inner view's style with `color` and `disabled` folded in — `{}` on iOS in every combination,
+ * which is RN's own answer there and the reason the node looked droppable.
+ */
+export declare function resolveButtonViewStyle(color: string | undefined, disabled: boolean | undefined): IViewStyle;
+/**
+ * The label as it is rendered: UPPERCASE on Android (Button.js:352-353).
+ *
+ * RN also asserts the title is a string one line above. Not reproduced: the assert is a dev-only
+ * `invariant`, and every adapter here types `title: string`.
+ */
+export declare function resolveButtonTitle(title: string): string;
+/**
+ * Whether the button is disabled, which `aria-disabled` may decide on its own.
+ *
+ * Button.js:337-338 — `props.disabled != null ? props.disabled : accessibilityState.disabled`. The
+ * engine already folds `aria-disabled` into the committed `accessibilityState`, but that fold is a
+ * PAYLOAD fold: it cannot suppress the press or grey the label, which is what this is for.
+ */
+export declare function resolveButtonDisabled(disabled: boolean | undefined, ariaDisabled: boolean | undefined, accessibilityState: {
+    disabled?: boolean;
+} | undefined): boolean | undefined;
+/**
+ * Button.js:356-359 — `'no'` becomes `'no-hide-descendants'`, so the label inside cannot take
+ * focus separately from the button that contains it.
+ */
+export declare function resolveButtonImportantForAccessibility(value: IAccessibilityProps['importantForAccessibility']): IAccessibilityProps['importantForAccessibility'];

package/build/view/render-button.js

@@ -1,23 +1,112 @@
-// Button: shared render half (framework-agnostic), matching RN's iOS shape (Button.js): a
-// TouchableOpacity wrapping a Text. Each adapter composes its own TouchableOpacity + Text
-// around the pieces below.
+// Button: shared render half (framework-agnostic). Ported against RN's own
+// `Libraries/Components/Button.js` — a touchable wrapping a `View` wrapping a `Text`, where the
+// VIEW is what carries the look on Android and is empty on iOS.
+//
+// The inner view is not optional chrome. RN's Button is the one control in the library that ships
+// a finished appearance, and on Android that appearance — a filled, elevated, rounded Material
+// button with an uppercased label — lives entirely on that node. A port that renders only the
+// touchable and the text is an iOS port, which is what this file was until 2026-09-09: blue text on
+// nothing, wherever Android was.
+//
+// What is NOT here, because a layer below already does it: the `aria-*` -> `accessibilityState`
+// fold RN performs in `Button.js:326-331`. The engine folds those for every node
+// (`core/engine/src/accessibility-props.ts`), so repeating it here would fold twice.
+import { Platform } from '@symbiote-native/engine';
+// Button.js:394-437, one constant per literal so a value cannot drift silently.
 const IOS_BUTTON_BLUE = '#007AFF';
-const IOS_DISABLED_GREY = '#cdcdcd';
+const IOS_DISABLED_TEXT = '#cdcdcd';
+const ANDROID_BUTTON_BLUE = '#2196F3';
+const ANDROID_DISABLED_BACKGROUND = '#dfdfdf';
+const ANDROID_DISABLED_TEXT = '#a1a1a1';
+const ANDROID_TEXT = 'white';
+const ANDROID_ELEVATION = 4;
+const ANDROID_DISABLED_ELEVATION = 0;
+const ANDROID_BORDER_RADIUS = 2;
+const TEXT_MARGIN = 8;
+const IOS_FONT_SIZE = 18;
+const ANDROID_FONT_WEIGHT = '500';
 // RN's Button is accessibilityRole="button"; the role string is a native accessibility enum value.
 export const BUTTON_ACCESSIBILITY_ROLE = 'button';
+// `styles.text` — the platform-invariant half plus the platform's own. RN spells the margin as
+// MARGIN, not padding: the label pushes the button's edges outward rather than insetting itself,
+// so a background (Android) or a tap target (both) is 16pt taller than the glyphs.
 export const buttonTextStyle = {
-    color: IOS_BUTTON_BLUE,
     textAlign: 'center',
-    padding: 8,
-    fontSize: 18,
+    margin: TEXT_MARGIN,
+    ...Platform.select({
+        ios: { color: IOS_BUTTON_BLUE, fontSize: IOS_FONT_SIZE },
+        android: { color: ANDROID_TEXT, fontWeight: ANDROID_FONT_WEIGHT },
+        default: { color: IOS_BUTTON_BLUE, fontSize: IOS_FONT_SIZE },
+    }),
 };
-// The label text style with the color folded in: an explicit `color` tints the label (iOS), and
-// `disabled` greys it out (disabled wins over color, matching RN's Button.js).
+// `styles.button` — empty on iOS, the whole Material look on Android.
+export const buttonViewStyle = Platform.select({
+    ios: {},
+    android: {
+        elevation: ANDROID_ELEVATION,
+        backgroundColor: ANDROID_BUTTON_BLUE,
+        borderRadius: ANDROID_BORDER_RADIUS,
+    },
+    default: {},
+}) ?? {};
+/**
+ * The label style with `color` and `disabled` folded in.
+ *
+ * `color` tints the TEXT on iOS and the BUTTON on Android (Button.js:318-324), so on Android this
+ * ignores it — see `resolveButtonViewStyle`, which is where it lands there. `disabled` wins over
+ * `color` on both, because RN pushes `textDisabled` after the tint.
+ */
 export function resolveButtonTextStyle(color, disabled) {
     const style = { ...buttonTextStyle };
-    if (color !== undefined)
+    if (color !== undefined && Platform.OS !== 'android')
         style.color = color;
-    if (disabled === true)
-        style.color = IOS_DISABLED_GREY;
+    if (disabled === true) {
+        style.color =
+            Platform.OS === 'android' ? ANDROID_DISABLED_TEXT : IOS_DISABLED_TEXT;
+    }
+    return style;
+}
+/**
+ * The inner view's style with `color` and `disabled` folded in — `{}` on iOS in every combination,
+ * which is RN's own answer there and the reason the node looked droppable.
+ */
+export function resolveButtonViewStyle(color, disabled) {
+    if (Platform.OS !== 'android')
+        return buttonViewStyle;
+    const style = { ...buttonViewStyle };
+    if (color !== undefined)
+        style.backgroundColor = color;
+    if (disabled === true) {
+        style.elevation = ANDROID_DISABLED_ELEVATION;
+        style.backgroundColor = ANDROID_DISABLED_BACKGROUND;
+    }
     return style;
 }
+/**
+ * The label as it is rendered: UPPERCASE on Android (Button.js:352-353).
+ *
+ * RN also asserts the title is a string one line above. Not reproduced: the assert is a dev-only
+ * `invariant`, and every adapter here types `title: string`.
+ */
+export function resolveButtonTitle(title) {
+    return Platform.OS === 'android' ? title.toUpperCase() : title;
+}
+/**
+ * Whether the button is disabled, which `aria-disabled` may decide on its own.
+ *
+ * Button.js:337-338 — `props.disabled != null ? props.disabled : accessibilityState.disabled`. The
+ * engine already folds `aria-disabled` into the committed `accessibilityState`, but that fold is a
+ * PAYLOAD fold: it cannot suppress the press or grey the label, which is what this is for.
+ */
+export function resolveButtonDisabled(disabled, ariaDisabled, accessibilityState) {
+    if (disabled !== undefined)
+        return disabled;
+    return ariaDisabled ?? accessibilityState?.disabled;
+}
+/**
+ * Button.js:356-359 — `'no'` becomes `'no-hide-descendants'`, so the label inside cannot take
+ * focus separately from the button that contains it.
+ */
+export function resolveButtonImportantForAccessibility(value) {
+    return value === 'no' ? 'no-hide-descendants' : value;
+}

package/build/view/render-image/index.d.ts

@@ -53,4 +53,6 @@ export type IImageViewProps = {
     referrerPolicy?: string;
     passthrough: Record<string, unknown>;
 };
+export declare const IMAGE_VIEW_PROP_NAMES: readonly ["source", "defaultSource", "loadingIndicatorSource", "style", "resizeMode", "tintColor", "src", "srcSet", "alt", "width", "height", "crossOrigin", "referrerPolicy"];
+export declare function mapImageProps(view: IImageViewProps): Record<string, unknown>;
 export declare function renderImage(view: IImageViewProps): IDescriptor;