Compare

InstallationCopy Anchor Link

Compare ships with the library — install it once, then import:

import { Compare } from "@delacour/react-native-ui/compare";

Or copy the source into your project, to own and edit it:

bunx delacour@latest add compare

UsageCopy Anchor Link

import { Compare } from "@/components/ui/compare";
import { Image, View } from "react-native";

const original = { uri: "https://example.com/harbour-original.jpg" };
const retouched = { uri: "https://example.com/harbour-retouched.jpg" };

export default function Example() {
  return (
    <View className="flex-1 justify-center p-4">
      <Compare accessibilityLabel="Retouch" className="aspect-[4/3]">
        <Compare.Before>
          <Image accessibilityLabel="Original photo" className="size-full" source={original} />
        </Compare.Before>
        <Compare.After>
          <Image accessibilityLabel="Retouched photo" className="size-full" source={retouched} />
        </Compare.After>
        <Compare.Label side="before">Original</Compare.Label>
        <Compare.Label side="after">Retouched</Compare.Label>
        <Compare.Handle />
      </Compare>
    </View>
  );
}

Compare.Before sits on the leading side — left, top when vertical, right under RTL — and Compare.After fills the frame behind it. A position of 1 shows only Before, 0 only After.

Both layers are laid out once, at the full frame size, and only a mask moves. The halves stay in register at every position: an image is revealed, never squashed, and text never reflows.

ThemesCopy Anchor Link

Each side takes any children — not only images. One Card under a light and a dark ScopedTheme is the realistic case: the seam cuts one card in half.

import { ScopedTheme } from "uniwind";

<Compare accessibilityLabel="Light and dark theme" className="h-64">
  <Compare.Before>
    <ScopedTheme theme="light">
      <ReportCard />
    </ScopedTheme>
  </Compare.Before>
  <Compare.After>
    <ScopedTheme theme="dark">
      <ReportCard />
    </ScopedTheme>
  </Compare.After>
  <Compare.Handle />
</Compare>

VerticalCopy Anchor Link

<Compare accessibilityLabel="Sky" className="h-72" orientation="vertical">
  …
</Compare>

Colours and sizesCopy Anchor Link

color paints the divider and the grip capsule; the glyph takes that colour's foreground. size moves the capsule only — the handle's touch band is 44pt at every size.

<Compare color="default" size="sm" />
<Compare color="primary" size="md" />
<Compare color="success" size="lg" />
<Compare color="warning" />
<Compare color="destructive" />
<Compare color="info" />

Snap pointsCopy Anchor Link

A release within snapThreshold of a point in snapPoints lands on it, with a haptic tick. Snapping waits for the release; a seam that snapped mid-drag would feel sticky.

<Compare snapPoints={[0, 0.5, 1]} snapThreshold={0.08} onPositionChangeEnd={save}>
  …
</Compare>

ControlledCopy Anchor Link

const [position, setPosition] = useState(0.5);

<Compare position={position} onPositionChange={setPosition} onPositionChangeEnd={persist}>
  …
</Compare>

onPositionChange follows the drag at percent resolution. onPositionChangeEnd fires once, after the snap — that is where a network write belongs. A parent that refuses a value leaves position unchanged and the seam springs back to it.

Inside a scroll viewCopy Anchor Link

With the default grab="handle", only the handle's 44pt band claims a touch. A vertical flick anywhere else on the frame scrolls the list.

grab="anywhere" lets a drag start anywhere on the frame and a tap jump the seam. Activation is axis-aware: a drag along the seam's axis takes the touch, a flick across it goes to the scroll view.

<ScrollView delaysContentTouches={false}>
  <Compare grab="anywhere" accessibilityLabel="Exposure" className="aspect-[4/3]">…</Compare>
</ScrollView>

AccessibilityCopy Anchor Link

• The handle is an adjustable — the frame is not, so each layer's content stays reachable on its own. Label your images.
• Its value reads the Before layer's share: "50 percent before", or "Showing only after" at an end. A plain-string Compare.Label substitutes its text — "50 percent Original" — and is itself hidden from screen readers, so the name is heard once.
• A VoiceOver or TalkBack swipe steps the seam by step (default 0.1), through the same snap and bounds as a drag, and fires onPositionChangeEnd.
• Name it with accessibilityLabel, or wrap it in a Field and the Field.Label names it. With neither, a development warning fires.
• A layer the seam covers completely leaves the accessibility tree, so nothing invisible is focusable.
• Under reduce motion the release does not spring; the drag itself still follows the finger.

API ReferenceCopy Anchor Link

AnatomyCopy Anchor Link

CompareCopy Anchor Link

Compare.Before / Compare.AfterCopy Anchor Link

Compare.HandleCopy Anchor Link

Compare.LabelCopy Anchor Link

useCompareCopy Anchor Link

Reads the enclosing comparison's state — the live position shared value, the frame size and the axes — for a custom handle or overlay that has to follow the seam. Throws outside a Compare.