# Pull To Refresh

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.

> Composed · Pro · Mobile-Native — React Native, Expo Go compatible.

## Install

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

## Import

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

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `disabled?` | `boolean` | Disable the pull gesture (content still scrolls). |
| `threshold?` | `number` | Resisted pull distance (pt) required to trigger. Default 80. |
| `maxPull?` | `number` | Resisted pull distance ceiling. Default 140. |
| `holdDistance?` | `number` | Gap the content holds open while refreshing. Default 64. |
| `light?` | `boolean` | Accent light pouring from the top edge as you pull. Default 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. |

Source: https://lumioui.com/components/pull-to-refresh