Before and after

Free · MITReact Native · Expo

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.

View as Markdown

Look

Try it on your phone

Scan to open this demo in your phone's browser and use it with your fingers.

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/before-after.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/before-after.

Usage

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

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

When to use

Use it for

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

Reach for something else

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

API reference

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

Motion and haptics

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.

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

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

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

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.

Blur reveal

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

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

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.