Pull To Refresh

Pro

Scrolling list with pull-to-refresh. A ring fills as you pull and lights up once you’ve pulled far enough, keeps turning while new content loads, then settles as the list returns.

Preview

Installation

npx @lumioui/cli add pro/pull-to-refresh

Usage

import { RefreshableScrollView, PullToRefresh } from "@/components/ui/pull-to-refresh/pull-to-refresh";
<PullToRefresh />

Also exported: RefreshableScrollView.

API reference

Prop Type Default
refreshing boolean

Controlled refresh flag. Omit it and the component tracks the onRefresh promise internally (uncontrolled).

 —
onRefresh () => void | Promise<void>

Runs when the pull passes the threshold and the finger lifts. May return a Promise — uncontrolled mode awaits it.

 —
haptic boolean

Light haptic on threshold cross + success haptic on completion. Default true.

 true
disabled boolean

Disable the pull gesture (content still scrolls).

 false
threshold number

Resisted pull distance (pt) required to trigger. Default 80.

 80
maxPull number

Resisted pull distance ceiling. Default 140.

 140
holdDistance number

Gap the content holds open while refreshing. Default 64.

 64
light boolean

Accent light pouring from the top edge as you pull. Default true.

 true
className string

Applied to the outer frame (the scroller fills it) — pass flex-1 or an explicit height exactly as you would have on the old ScrollView.

 —