panelui-native 0.84.0 → 0.86.0

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/progress-button/index.tsx

@@ -116,15 +116,6 @@ const DONE_TINT = {
 
 const progressButtonVariants = tv({
   slots: {
-    /*
-     * A pill, not the `rounded-lg` the other buttons take.
-     *
-     * The fill is clipped by this radius, so the shape of the button is also
-     * the shape of the wipe's leading edge as it comes out of the corner. On a
-     * small radius that edge emerges square from a rounded box, which reads as
-     * a rectangle sliding out from under the button rather than as the button
-     * filling up.
-     */
     /*
      * Every variant rests on the same secondary surface, and `variant` decides
      * only what colour comes across it.
@@ -140,7 +131,7 @@ const progressButtonVariants = tv({
      * that survives the wipe, since the fill covers the ground the label was
      * standing on and the second copy takes over.
      */
-    root: 'relative overflow-hidden rounded-full border border-transparent bg-secondary',
+    root: 'relative overflow-hidden border border-transparent bg-secondary',
     /*
      * The row inside the button. It is separate from `root` because the fill
      * has to sit over the whole button including its padding — a wipe that
@@ -179,29 +170,50 @@ const progressButtonVariants = tv({
     size: {
       // Matched to Button's boxes, and `min-h-*` for the same reason: the
       // label's glyphs grow with the system text size and the box has to grow
-      // with them.
-      // Wider than the equivalent Button, because the corner is a half-circle
-      // rather than a small radius: the curve eats into the side padding, and
-      // at Button's values the first and last glyphs sit against it.
+      // with them. The side padding is `shape`'s to decide, below.
       sm: {
         root: 'min-h-9',
-        content: 'min-h-9 gap-1.5 px-3.5 py-2',
+        content: 'min-h-9 gap-1.5 py-2',
         label: 'text-[14px]',
         fillLabel: 'text-[14px]',
       },
       md: {
         root: 'min-h-11',
-        content: 'min-h-11 px-5 py-2.5',
+        content: 'min-h-11 py-2.5',
         label: 'text-[16px]',
         fillLabel: 'text-[16px]',
       },
       lg: {
         root: 'min-h-12',
-        content: 'min-h-12 px-7 py-2.5',
+        content: 'min-h-12 py-2.5',
         label: 'text-[18px]',
         fillLabel: 'text-[18px]',
       },
     },
+    /*
+     * The corner, and the side padding that follows from it.
+     *
+     * The fill is clipped by the button's radius, so the shape of the button is
+     * also the shape of the wipe's leading edge as it comes out of the corner.
+     * A pill sends that edge out as a curve, which reads as the button filling
+     * up; a small radius sends it out square, which reads as a rectangle
+     * sliding out from under the button. That is why `pill` is the default and
+     * stays it.
+     *
+     * `rounded` is for a progress button standing in a row of ordinary ones —
+     * a form's footer, a toolbar, a card's actions — where a lone pill among
+     * `rounded-lg` buttons reads as a different kind of control rather than as
+     * the one that has to be held. It is `Button`'s box exactly: same radius,
+     * same padding, same minimum width, and the heights already agreed.
+     */
+    shape: {
+      // The radius is only on the root. It has `overflow-hidden`, so it is what
+      // clips the fill — and the fill's own leading edge has to stay straight:
+      // rounding it would round the wipe's front as well as the button's
+      // corner, which is a bar with a domed end travelling across the button.
+      pill: { root: 'rounded-full' },
+      rounded: { root: 'rounded-lg' },
+    },
     fullWidth: {
       true: { root: 'w-full' },
     },
@@ -209,9 +221,22 @@ const progressButtonVariants = tv({
       true: { root: 'opacity-[0.64]' },
     },
   },
+  compoundVariants: [
+    // A pill is wider than the equivalent Button at every size, because the
+    // corner is a half-circle rather than a small radius: the curve eats into
+    // the side padding, and at Button's values the first and last glyphs sit
+    // against it. `rounded` has Button's corner, so it takes Button's padding.
+    { shape: 'pill', size: 'sm', class: { content: 'px-3.5' } },
+    { shape: 'pill', size: 'md', class: { content: 'px-5' } },
+    { shape: 'pill', size: 'lg', class: { content: 'px-7' } },
+    { shape: 'rounded', size: 'sm', class: { root: 'min-w-9', content: 'px-2.5' } },
+    { shape: 'rounded', size: 'md', class: { root: 'min-w-11', content: 'px-4' } },
+    { shape: 'rounded', size: 'lg', class: { content: 'px-6' } },
+  ],
   defaultVariants: {
     variant: 'primary',
     size: 'md',
+    shape: 'pill',
   },
 });
 
@@ -221,6 +246,8 @@ type ProgressButtonVariantProps = VariantProps<typeof progressButtonVariants>;
 export type ProgressButtonVariant = NonNullable<ProgressButtonVariantProps['variant']>;
 /** How big a progress button is. */
 export type ProgressButtonSize = NonNullable<ProgressButtonVariantProps['size']>;
+/** What corner a progress button has. */
+export type ProgressButtonShape = NonNullable<ProgressButtonVariantProps['shape']>;
 
 interface ProgressButtonContextValue {
   /** `0` to `1` across the hold. */
@@ -282,6 +309,18 @@ export interface ProgressButtonProps
    * whether an action is worth feeling is the caller's call, not the control's.
    */
   haptics?: boolean;
+  /**
+   * The corner. `pill` by default — the fill is clipped by it, so a half-circle
+   * sends the wipe's leading edge out as a curve and the button reads as
+   * filling up.
+   *
+   * `rounded` gives it [Button](/docs/components/button)'s box exactly: the
+   * same radius, side padding and minimum width, at heights that already
+   * matched. Use it where the hold stands in a row of ordinary buttons — a
+   * form's footer, a toolbar, a card's actions — and a lone pill would read as
+   * a different kind of control rather than as the one that has to be held.
+   */
+  shape?: ProgressButtonShape;
   children?: ReactNode;
 }
 
@@ -290,6 +329,7 @@ const ProgressButtonRoot = forwardRef<View, ProgressButtonProps>(function Progre
     className,
     variant = 'primary',
     size = 'md',
+    shape = 'pill',
     fullWidth,
     holdDuration,
     onComplete,
@@ -305,7 +345,7 @@ const ProgressButtonRoot = forwardRef<View, ProgressButtonProps>(function Progre
   },
   ref
 ) {
-  const slots = progressButtonVariants({ variant, size, fullWidth, disabled });
+  const slots = progressButtonVariants({ variant, size, shape, fullWidth, disabled });
   const duration = resolveHoldDuration(holdDuration);
   const reducedMotion = useReducedMotion();
 

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>
       );
     }