# Before and after

> Drag a handle across two pictures to compare them. The handle follows the finger on the UI thread, with a cue at the midpoint and at each end, and plays one short sweep on mount to show it can be dragged.

- Type: Component (data)
- Access: Free, open source (MIT)
- Page: https://goodui.dev/native/components/before-after
- Markdown: https://goodui.dev/native/components/before-after.md
- Registry item: https://goodui.dev/native/r/before-after.json
- Dependencies: react-native-gesture-handler, react-native-reanimated, react-native-svg
- Keywords: react native before after slider, image comparison, compare two images, photo enhance result, image split slider

## When to use

- Showing what a photo tool changed: restoring, retouching, restyling.
- Any pair of pictures with the same framing.

## When not to use

- Two unrelated pictures: the comparison means nothing unless they line up.
- Comparing more than two versions: use a carousel.

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add https://goodui.dev/native/r/before-after.json
npx expo install --fix
```

The component lands in `components/goodui-native/before-after/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs locale.

Built-in strings follow `<GooduiLocaleProvider>` (one [language pack](https://goodui.dev/native/r/locale-tr.json) translates the whole kit); the `labels` prop overrides them for one instance.

## Usage

```tsx
import { BeforeAfter } from "@/components/goodui-native/before-after/before-after";

<BeforeAfter before={require("./photo.jpg")} after={{ uri: resultUrl }} aspectRatio={4 / 5} />
```

## API reference

### BeforeAfter

`import { BeforeAfter } from "@/components/goodui-native/before-after/before-after";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `before` (required) | `ImageSourcePropType` | – | – |
| `after` (required) | `ImageSourcePropType` | – | – |
| `aspectRatio` | `number` | `0.8` | Width over height. |
| `hint` | `boolean` | `true` | Plays one short sweep on mount to show it can be dragged. |
| `labels` | `Partial<BeforeAfterLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

## Accessibility

- An adjustable element that reads the share of the after image shown: increment and decrement move the split by 10 percent.

## Motion

- The split tracks the finger directly, the knob lifts while held, and the mount sweep settles on a spring.
- The Before and After tags fade as the handle reaches them.
- Reduced motion: no mount sweep.

## Haptics

- drag-start once a drag begins, a tick at the midpoint, drop at each end.

## Performance

- The handle and clip update on the UI thread without re-rendering React.

## Notes for AI

- Give both images the same framing and pass the true aspectRatio (width over height). Both are cropped with cover.
- It stays left to right under RTL because pictures are physical. Do not mirror it.
- The gesture yields to vertical scrolling, so it is safe inside a ScrollView.

## Related

- [Blur reveal](https://goodui.dev/native/components/blur-reveal.md): Shows a result arriving: a scan line wipes down a blurred picture and leaves it sharp, then the frame settles with a spring and an unlock cue.
- [Image viewer](https://goodui.dev/native/components/image-viewer.md): Tap a thumbnail and the photo flies out of it into a full-screen viewer, its crop opening up as it lands; pinch or double-tap to zoom at your fingers, drag to pan, swipe between photos, and drag down to send it back into its thumbnail while the background fades. On the web the wheel zooms toward the pointer.
- [Report sheet](https://goodui.dev/native/components/report-sheet.md): A bottom sheet for reporting generated content: six reasons, a switch to hide similar content, and a thank-you state. It gives AI apps an in-app way to report results, which app stores expect of generated content.

## Guidance for AI tools

Before and after: Drag a handle across two pictures to compare them. The handle follows the finger on the UI thread, with a cue at the midpoint and at each end, and plays one short sweep on mount to show it can be dragged. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt