Compare two images with a controlled reveal and native adjustable slider.
Native example
The value is the visible after fraction, clamped to zero through one; nonfinite input falls back to one half. The application owns image loading, errors, cache, fit and descriptions; provide React Native sources, SwiftUI content builders or Compose painters.
import { useState } from 'react'
import { LumenImageComparison } from '@santi020k/lumen-react-native'
export function CompareEdits() {
const [position, setPosition] = useState(0.5)
return <LumenImageComparison label="Compare edits"
before={require('./before.png')} after={require('./after.png')}
value={position} onValueChange={setPosition}
beforeLabel="Before" afterLabel="After" />
}Reference
The primary shared and platform-specific options exposed by LumenImageComparison.
| API | Values or type | Default | Description |
|---|---|---|---|
| label | string | Required | Names the adjustable reveal. |
| before / after | ImageSourcePropType | Required | Application-owned sources; provide assets and loading policy. |
| value / onValueChange | number / (number) => void | Required | Controls the visible after fraction, zero through one. |
| beforeLabel / afterLabel | string | Before / After | Localizes image labels and adjustment state. |
| aspectRatio | number | 16 / 9 | Accepts 0.1 through 10; otherwise uses 16:9. |
| fit | LumenImageFit | cover | Chooses cover or contain image behavior. |
| locale | string | undefined | Formats the percentage. |
| enabled | boolean | true | Disables adjustment while preserving images. |
| style / View props | ViewProps | undefined | Applies native layout and accessibility props. |
Native behavior
The value is the visible after fraction, clamped to zero through one; nonfinite input falls back to one half. The application owns image loading, errors, cache, fit and descriptions; provide React Native sources, SwiftUI content builders or Compose painters.
Exposes a named native slider with localized percentage state for touch, keyboard, and screen-reader adjustment.
Shared component