panelui-native 0.84.0 → 0.85.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-native",
-  "version": "0.84.0",
+  "version": "0.85.0",
   "description": "High-performance React Native UI components for Expo. Semantic design tokens, powered by Uniwind (Tailwind v4) and Reanimated.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
@@ -32,6 +32,16 @@
       "react-native": "./src/theme/use-theme.ts",
       "default": "./lib/module/theme/use-theme.js"
     },
+    "./icons": {
+      "types": "./lib/typescript/src/icons/index.d.ts",
+      "react-native": "./src/icons/index.tsx",
+      "default": "./lib/module/icons/index.js"
+    },
+    "./primitives/text": {
+      "types": "./lib/typescript/src/primitives/text.d.ts",
+      "react-native": "./src/primitives/text.tsx",
+      "default": "./lib/module/primitives/text.js"
+    },
     "./primitives/animated-pressable": {
       "types": "./lib/typescript/src/primitives/animated-pressable.d.ts",
       "react-native": "./src/primitives/animated-pressable.tsx",

package/src/components/bottom-sheet/index.tsx

@@ -38,7 +38,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv } from 'tailwind-variants';
-import { getComposeModifiers, getNativeUI, getSwiftUIModifiers } from '../../native';
+import { NativeHost, getComposeModifiers, getNativeUI, getSwiftUIModifiers } from '../../native';
 import { XIcon } from '../../icons';
 import { ModalPortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
@@ -700,7 +700,12 @@ function BottomSheetContent({
     // sheet cannot measure RN views directly. Without it the sheet sizes to
     // nothing and the content spills outside its container.
     return (
-      <Host matchContents ignoreSafeArea="keyboard" style={{ position: 'absolute' }}>
+      <NativeHost
+        host={Host}
+        matchContents
+        ignoreSafeArea="keyboard"
+        style={{ position: 'absolute' }}
+      >
         <NativeBottomSheet
           isPresented={nativePresented}
           onDismiss={onNativeDismiss}
@@ -734,7 +739,7 @@ function BottomSheetContent({
             </BottomSheetContext.Provider>
           </RNHostView>
         </NativeBottomSheet>
-      </Host>
+      </NativeHost>
     );
   }
 

package/src/components/button/index.tsx

@@ -9,7 +9,7 @@ import {
 import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { IconColorProvider } from '../../icons';
-import { getNativeUI, getSwiftUIModifiers } from '../../native';
+import { NativeHost, getNativeUI, getSwiftUIModifiers } from '../../native';
 import { Spinner } from '../spinner';
 
 const buttonVariants = tv({
@@ -233,13 +233,15 @@ export interface ButtonProps
 /**
  * Height given to the platform button, matching the styled scale above.
  *
- * It goes on the button rather than on the host, and that distinction is the
- * whole fix for the jump. A host sized to a number with an unsized control
- * inside it hands the platform a box the control never agreed to: SwiftUI and
- * Compose both lay out against their own intrinsic size and only settle into
- * the box when something forces a second pass — which for a button is the
- * first press. Given a definite height of its own, the button has nothing left
- * to recompute, and the host follows it with `matchContents`.
+ * It goes on the host as well as on the button, and the host is the half that
+ * stops the jump. `matchContents` does not mean "size the host once" — it
+ * means the host keeps its React Native box equal to whatever SwiftUI most
+ * recently laid out, and a button laying itself out again is what a press is.
+ * So the box moved under the press, and everything below it moved with it.
+ *
+ * A height we already know is not a question worth asking the platform, so it
+ * is not asked: the host states it, and `matchContents` is narrowed to the
+ * axis that is genuinely unknown. See the host in the native branch below.
  */
 const NATIVE_HEIGHT: Record<NonNullable<ButtonVariantProps['size']>, number> = {
   sm: 36,
@@ -402,8 +404,31 @@ export const Button = forwardRef<View, ButtonProps>(
        */
       const nativeContent = prominent ? '#ffffff' : contentColor;
 
+      /*
+       * The box React Native reserves for the platform button, stated rather
+       * than measured.
+       *
+       * An icon button is a square we chose, so both axes are known and the
+       * host is asked to match nothing. A labelled button's width is its
+       * text's and known only to the platform, so the height is stated and
+       * only the width is matched.
+       *
+       * Leaving both to `matchContents` is what made the button move on its
+       * first press: the host tracks SwiftUI's latest layout, and a pressed
+       * button lays out again.
+       */
+      const hostFrame =
+        resolvedSize === 'icon'
+          ? { width: NATIVE_ICON_FRAME, height: NATIVE_ICON_FRAME }
+          : { height: NATIVE_HEIGHT[resolvedSize ?? 'md'] };
+
       return (
-        <Host matchContents ignoreSafeArea="keyboard">
+        <NativeHost
+          host={Host}
+          matchContents={resolvedSize === 'icon' ? false : { horizontal: true }}
+          ignoreSafeArea="keyboard"
+          style={hostFrame}
+        >
           <NativeButton
             label={isStringLabel ? children : undefined}
             // The platform only reads a symbol beside a label it drew itself,
@@ -421,11 +446,7 @@ export const Button = forwardRef<View, ButtonProps>(
              * background around. The frame only has to be large enough to hold
              * the result.
              */
-            style={
-              resolvedSize === 'icon'
-                ? { width: NATIVE_ICON_FRAME, height: NATIVE_ICON_FRAME }
-                : { height: NATIVE_HEIGHT[resolvedSize ?? 'md'] }
-            }
+            style={hostFrame}
             modifiers={nativeModifiers.length ? nativeModifiers : undefined}
             onPress={props.onPress}
           >
@@ -461,7 +482,7 @@ export const Button = forwardRef<View, ButtonProps>(
               </RNHostView>
             )}
           </NativeButton>
-        </Host>
+        </NativeHost>
       );
     }
 

package/src/components/flip-card/index.tsx

@@ -0,0 +1,419 @@
+/**
+ * FlipCard — two faces of one card, and a turn between them.
+ *
+ * ```tsx
+ * <FlipCard>
+ *   <FlipCard.Front className="items-center justify-center rounded-2xl bg-card p-6">
+ *     <Text>Tap me</Text>
+ *   </FlipCard.Front>
+ *   <FlipCard.Back className="items-center justify-center rounded-2xl bg-primary p-6">
+ *     <Text className="text-primary-foreground">The other side</Text>
+ *   </FlipCard.Back>
+ * </FlipCard>
+ * ```
+ *
+ * For content that is genuinely two-sided — a bank card and its security code,
+ * a term and its definition, a photograph and what it is of. Not for
+ * progressive disclosure: the back replaces the front rather than extending
+ * it, so anything the reader needs to compare across the turn belongs in
+ * [Collapsible](../collapsible) or a second card instead.
+ *
+ * ## One box, and both faces in it
+ *
+ * The back is laid over the front, so there is one box and the two faces fill
+ * it. State the height on the root and both faces take it; leave it off and
+ * the front's own content decides, with the back given whatever that came to.
+ *
+ * A back with more in it than the front overflows rather than growing the
+ * card, and the fix is a height on the root rather than more padding on the
+ * back — a card whose height changed halfway through the turn would be a card
+ * that moved everything under it.
+ *
+ * ## Both faces are hidden the same way twice
+ *
+ * `backfaceVisibility` is the mechanism, and it is not reliable on every
+ * Android surface — so the face that has turned away is also faded out and
+ * dropped behind, on the same shared value, at the halfway point. Two
+ * mechanisms for one job, because the failure of the first is a card that
+ * shows both faces mirrored through each other and nothing in the tree that
+ * says why.
+ *
+ * ## Under reduce motion
+ *
+ * The faces swap with no turn at all. Not a shorter turn — none. The rotation
+ * is the part that moves, and moving is the part the setting is about; which
+ * face is showing is the information, and it is kept.
+ */
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { StyleSheet, View, type ViewProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  cancelAnimation,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSpring,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { cn } from '../../utils/cn';
+
+/**
+ * How the card settles on a face.
+ *
+ * Clamped, and a little heavier than the library's other springs. A card has
+ * apparent mass — it is a rectangle the size of your hand — and a turn that
+ * overshoots and comes back reads as a playing card being flicked rather than
+ * an object being turned over. The overshoot is also the one place the hidden
+ * face can appear, since it puts the rotation past 360.
+ */
+const SPRING = {
+  damping: 18,
+  stiffness: 140,
+  mass: 0.9,
+  overshootClamping: true,
+} as const;
+
+/**
+ * Distance across the card that counts as a whole turn, as a fraction of its
+ * own width or height.
+ *
+ * Less than the full span: a drag that has crossed two thirds of the card has
+ * made its point, and requiring the whole width means the last part of every
+ * deliberate flip is spent travelling to an edge the finger has to reach.
+ */
+const DRAG_SPAN = 0.66;
+
+/** Velocity, in points per second, that carries a short drag over anyway. */
+const FLICK_VELOCITY = 500;
+
+const flipCardVariants = tv({
+  slots: {
+    root: 'relative',
+    face: 'w-full',
+  },
+});
+
+/** Which axis the card turns about. */
+export type FlipCardDirection = 'horizontal' | 'vertical';
+
+/** Which way round it turns. */
+export type FlipCardRotation = 'normal' | 'reverse';
+
+/** What flips the card. */
+export type FlipCardTrigger = 'press' | 'drag' | 'none';
+
+interface FlipCardContextValue {
+  flipped: boolean;
+  direction: FlipCardDirection;
+  rotation: FlipCardRotation;
+  perspective: number;
+  progress: SharedValue<number>;
+  flip: () => void;
+}
+
+const FlipCardContext = createContext<FlipCardContextValue | null>(null);
+
+function useFlipCardContext(component: string) {
+  const context = useContext(FlipCardContext);
+  if (!context) throw new Error(`${component} must be used within a <FlipCard>`);
+  return context;
+}
+
+/**
+ * The card's state, for a face that needs to know which way round it is.
+ *
+ * `progress` runs 0 → 1 across the turn and is a shared value, so a face can
+ * drive its own animation off the same turn rather than starting a second one
+ * beside it.
+ */
+export function useFlipCard() {
+  const { flipped, direction, rotation, progress, flip } = useFlipCardContext('useFlipCard');
+  return { flipped, direction, rotation, progress, flip };
+}
+
+export interface FlipCardProps extends Omit<ViewProps, 'children'> {
+  /** `FlipCard.Front` and `FlipCard.Back`, in either order. */
+  children?: ReactNode;
+  /**
+   * Which axis the card turns about. `horizontal` turns it left to right about
+   * its vertical axis; `vertical` turns it top over bottom.
+   */
+  direction?: FlipCardDirection;
+  /**
+   * Which way round the turn goes. `reverse` sends it the other way, for a
+   * pair of cards that should not turn identically.
+   */
+  rotation?: FlipCardRotation;
+  /**
+   * Which face is showing, when the caller holds it. Leave unset to let the
+   * card keep its own, and pair with `trigger="none"` for a card flipped only
+   * from outside.
+   */
+  flipped?: boolean;
+  /** Which face an uncontrolled card starts on. */
+  defaultFlipped?: boolean;
+  /** Fires whenever the card settles on the other face, however it got there. */
+  onFlippedChange?: (flipped: boolean) => void;
+  /**
+   * What turns the card. `press` is a tap anywhere on it; `drag` turns it with
+   * the finger and springs to whichever face is nearer on release; `none`
+   * leaves it to `flipped`.
+   */
+  trigger?: FlipCardTrigger;
+  /**
+   * How deep the turn looks, in points. Smaller is more dramatic — the near
+   * edge swings further out — and below about 400 a full card starts to read
+   * as a door rather than a card.
+   */
+  perspective?: number;
+  /** Classes for the card's own box. The front's size is the card's size. */
+  className?: string;
+}
+
+const FlipCardRoot = forwardRef<View, FlipCardProps>(
+  (
+    {
+      children,
+      direction = 'horizontal',
+      rotation = 'normal',
+      flipped: flippedProp,
+      defaultFlipped = false,
+      onFlippedChange,
+      trigger = 'press',
+      perspective = 1000,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [internal, setInternal] = useState(defaultFlipped);
+    const isControlled = flippedProp !== undefined;
+    const flipped = isControlled ? flippedProp : internal;
+
+    const progress = useSharedValue(defaultFlipped ? 1 : 0);
+    const startProgress = useSharedValue(0);
+    const span = useSharedValue(0);
+    const reduceMotion = useReducedMotion();
+
+    const { root, face } = flipCardVariants();
+
+    /*
+     * The settled face is React state and the turn is a shared value, and the
+     * two are kept in step from here rather than from the gesture: a drag that
+     * is let go past halfway has already decided, and telling React at the
+     * moment of release rather than at the end of the spring is what keeps the
+     * hidden face out of the accessibility tree while it is still turning.
+     */
+    const settle = useCallback(
+      (next: boolean) => {
+        if (!isControlled) setInternal(next);
+        onFlippedChange?.(next);
+      },
+      [isControlled, onFlippedChange]
+    );
+
+    useEffect(() => {
+      progress.value = reduceMotion
+        ? flipped
+          ? 1
+          : 0
+        : withSpring(flipped ? 1 : 0, SPRING);
+    }, [flipped, progress, reduceMotion]);
+
+    useEffect(() => () => cancelAnimation(progress), [progress]);
+
+    const flip = useCallback(() => settle(!flipped), [flipped, settle]);
+
+    const gesture = useMemo(() => {
+      const tap = Gesture.Tap()
+        .enabled(trigger === 'press')
+        .onEnd((_event, success) => {
+          if (success) runOnJS(flip)();
+        });
+
+      /*
+       * The span is read from the shared value rather than from a captured
+       * number, so a card that is measured or resized mid-touch does not leave
+       * the gesture dividing by the width it had when the finger landed.
+       */
+      const pan = Gesture.Pan()
+        .enabled(trigger === 'drag')
+        .onBegin(() => {
+          startProgress.value = progress.value;
+        })
+        .onUpdate((event) => {
+          const travel = direction === 'horizontal' ? event.translationX : event.translationY;
+          const reach = Math.max(span.value * DRAG_SPAN, 1);
+          const next = startProgress.value + travel / reach;
+          progress.value = Math.min(Math.max(next, 0), 1);
+        })
+        .onEnd((event) => {
+          const velocity = direction === 'horizontal' ? event.velocityX : event.velocityY;
+          const committed =
+            progress.value > 0.5 || (progress.value > 0.1 && velocity > FLICK_VELOCITY);
+          runOnJS(settle)(committed);
+        });
+
+      return Gesture.Exclusive(pan, tap);
+    }, [direction, flip, progress, settle, span, startProgress, trigger]);
+
+    /*
+     * One turn, read two ways. The front runs 0 → 180 and the back 180 → 360,
+     * so at any moment exactly one of them has its face toward the reader.
+     *
+     * `sign` is not an RTL mirror. Turning a physical object over is a physical
+     * direction, not a reading direction, and a card that spun the other way
+     * in an Arabic layout would be a different card rather than the same one
+     * laid out correctly.
+     */
+    const sign = rotation === 'reverse' ? -1 : 1;
+    const axis = direction === 'horizontal' ? 'rotateY' : 'rotateX';
+
+    const frontStyle = useAnimatedStyle(() => {
+      const angle = interpolate(progress.value, [0, 1], [0, 180 * sign]);
+      const showing = progress.value < 0.5;
+      return {
+        transform: [{ perspective }, { [axis]: `${angle}deg` } as never],
+        opacity: showing ? 1 : 0,
+        zIndex: showing ? 1 : 0,
+      };
+    });
+
+    const backStyle = useAnimatedStyle(() => {
+      const angle = interpolate(progress.value, [0, 1], [-180 * sign, 0]);
+      const showing = progress.value >= 0.5;
+      return {
+        transform: [{ perspective }, { [axis]: `${angle}deg` } as never],
+        opacity: showing ? 1 : 0,
+        zIndex: showing ? 1 : 0,
+      };
+    });
+
+    let front: ReactNode = null;
+    let back: ReactNode = null;
+    for (const child of Children.toArray(children)) {
+      if (!isValidElement(child)) continue;
+      if (child.type === FlipCardFront) front = child;
+      else if (child.type === FlipCardBack) back = child;
+    }
+
+    const context = useMemo<FlipCardContextValue>(
+      () => ({ flipped, direction, rotation, perspective, progress, flip }),
+      [direction, flip, flipped, perspective, progress, rotation]
+    );
+
+    /*
+     * The gesture goes on the card itself rather than on a view around it.
+     *
+     * A wrapper is an extra box with no width of its own, and a card sized
+     * `w-full` inside one is asking for a percentage of nothing — which is how
+     * a two-hundred-point card ended up taller than the screen and hanging off
+     * the side of it.
+     *
+     * The accessibility action rides here for the same reason. A drag is not
+     * available to a screen reader, and a card that can only be turned by
+     * dragging is a card some readers can never see the back of.
+     */
+    const card = (
+      <View
+        ref={ref}
+        onLayout={(event) => {
+          span.value =
+            direction === 'horizontal'
+              ? event.nativeEvent.layout.width
+              : event.nativeEvent.layout.height;
+        }}
+        accessible={trigger !== 'none'}
+        accessibilityRole={trigger === 'none' ? undefined : 'button'}
+        accessibilityState={{ expanded: flipped }}
+        accessibilityActions={
+          trigger === 'none' ? undefined : [{ name: 'activate', label: 'Flip the card over' }]
+        }
+        onAccessibilityAction={trigger === 'none' ? undefined : flip}
+        {...props}
+        className={root({ className })}
+      >
+        {/* The front is in flow and the back is laid over it, so the card is
+            the front's size on both axes and the back is handed that box. */}
+        <Animated.View
+          style={frontStyle}
+          className={face({ className: 'grow' })}
+          accessibilityElementsHidden={flipped}
+          importantForAccessibility={flipped ? 'no-hide-descendants' : 'auto'}
+        >
+          {front}
+        </Animated.View>
+        <Animated.View
+          style={[StyleSheet.absoluteFill, backStyle]}
+          className={face()}
+          accessibilityElementsHidden={!flipped}
+          importantForAccessibility={flipped ? 'auto' : 'no-hide-descendants'}
+        >
+          {back}
+        </Animated.View>
+      </View>
+    );
+
+    return (
+      <FlipCardContext.Provider value={context}>
+        {/* A gesture rather than a Pressable, and no press feedback with it.
+            The card already answers the touch by turning; dipping it first
+            makes the turn look like it started late. */}
+        {trigger === 'none' ? card : <GestureDetector gesture={gesture}>{card}</GestureDetector>}
+      </FlipCardContext.Provider>
+    );
+  }
+);
+
+export interface FlipCardFaceProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** The face showing at rest. Its size is the card's size. */
+const FlipCardFront = forwardRef<View, FlipCardFaceProps>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    // The backface is the first of the two mechanisms that hide a face turned
+    // away; the opacity on the animated parent is the second.
+    style={{ backfaceVisibility: 'hidden' }}
+    {...props}
+    // `h-full` of a card that states no height is ignored rather than
+    // collapsing, so one shape covers both: a card given a height is filled,
+    // and a card left to its content still measures it.
+    className={cn('h-full w-full', className)}
+  />
+));
+
+/** The face revealed by the turn, laid over the front. */
+const FlipCardBack = forwardRef<View, FlipCardFaceProps>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    style={{ backfaceVisibility: 'hidden' }}
+    {...props}
+    className={cn('h-full w-full', className)}
+  />
+));
+
+FlipCardRoot.displayName = 'FlipCard';
+FlipCardFront.displayName = 'FlipCard.Front';
+FlipCardBack.displayName = 'FlipCard.Back';
+
+export const FlipCard = Object.assign(FlipCardRoot, {
+  Front: FlipCardFront,
+  Back: FlipCardBack,
+});

package/src/components/popover/index.tsx

@@ -63,7 +63,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { FocusRestorePortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
 import { useBackHandler } from '../../hooks/use-back-handler';
-import { getSwiftUI } from '../../native';
+import { NativeHost, getSwiftUI } from '../../native';
 import { BottomSheet } from '../bottom-sheet';
 import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
@@ -315,7 +315,7 @@ function NativePopover({
     typeof contentProps?.width === 'number' ? contentProps.width : NATIVE_PANEL_WIDTH;
 
   return (
-    <Host matchContents ignoreSafeArea="keyboard">
+    <NativeHost host={Host} matchContents ignoreSafeArea="keyboard">
       <PlatformPopover
         isPresented={open}
         onIsPresentedChange={setOpen}
@@ -338,7 +338,7 @@ function NativePopover({
           </RNHostView>
         </PlatformPopover.Content>
       </PlatformPopover>
-    </Host>
+    </NativeHost>
   );
 }
 

package/src/components/select/index.tsx

@@ -63,7 +63,7 @@ import Animated, {
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { CheckIcon, ChevronDownIcon, SearchIcon } from '../../icons';
-import { getNativeUI } from '../../native';
+import { NativeHost, getNativeUI } from '../../native';
 import { Portal } from '../../primitives/portal';
 import { Text, textChildren } from '../../primitives/text';
 import { useBackHandler } from '../../hooks/use-back-handler';
@@ -568,7 +568,7 @@ function SelectRoot({
       // A picker fills the width of the row it sits in and reports its own
       // height — a menu is a compact button, a wheel a full rotor, and the
       // platform is the only thing that knows which by how much.
-      <Host matchContents={{ vertical: true }} ignoreSafeArea="keyboard">
+      <NativeHost host={Host} matchContents={{ vertical: true }} ignoreSafeArea="keyboard">
         <Picker
           selectedValue={value ?? firstEnabled?.value ?? ''}
           onValueChange={(next: string) => onValueChange(next)}
@@ -579,7 +579,7 @@ function SelectRoot({
             <Picker.Item key={option.value} label={option.label} value={option.value} />
           ))}
         </Picker>
-      </Host>
+      </NativeHost>
     );
   }
 

package/src/components/slider/index.tsx

@@ -42,7 +42,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { useDirectionSign } from '../../hooks/use-direction';
-import { getNativeUI } from '../../native';
+import { NativeHost, getNativeUI } from '../../native';
 import { Text } from '../../primitives/text';
 import { selectionTick } from '../../utils/haptics';
 
@@ -102,6 +102,15 @@ const sliderVariants = tv({
 /** Thumb width per size. Wider than it is tall, so the pill reads as a grip. */
 const THUMB_WIDTH: Record<'sm' | 'md' | 'lg', number> = { sm: 24, md: 28, lg: 32 };
 
+/**
+ * The box the platform slider is given, in points.
+ *
+ * Both platforms draw a slider shorter than this and centre it, so the number
+ * is the row's height rather than the control's — and at 44 it is also the
+ * smallest a thing you drag is allowed to be.
+ */
+const NATIVE_SLIDER_HEIGHT = 44;
+
 type SliderVariantProps = VariantProps<typeof sliderVariants>;
 
 export interface SliderProps extends Omit<SliderVariantProps, 'disabled'> {
@@ -564,10 +573,23 @@ export const Slider = forwardRef<View, SliderProps>(
       return (
         <View ref={ref} className={slots.root({ className })}>
           {header}
-          {/* A slider has no intrinsic width — it fills whatever it is given —
-              so the width comes from ordinary layout and only the height is
-              matched to the platform's content. */}
-          <Host matchContents={{ vertical: true }} ignoreSafeArea="keyboard">
+          {/*
+            Neither axis is left to the platform.
+
+            A slider has no intrinsic width — it fills whatever it is given —
+            so ordinary layout was always going to decide that. The height was
+            being matched, and matching is not a one-off: the host writes the
+            platform's measured size back into the layout on every geometry
+            change, so the row's height moved whenever the control was touched
+            and everything below it moved with it. The height is stated
+            instead.
+          */}
+          <NativeHost
+            host={Host}
+            matchContents={false}
+            ignoreSafeArea="keyboard"
+            style={{ height: NATIVE_SLIDER_HEIGHT }}
+          >
             <NativeSlider
               value={value}
               onValueChange={(next: number) => {
@@ -578,7 +600,7 @@ export const Slider = forwardRef<View, SliderProps>(
               step={step}
               disabled={disabled}
             />
-          </Host>
+          </NativeHost>
         </View>
       );
     }