Skip to content
Native Animation
Elastic Pull Refresh animation preview
RefreshScrollMicroSkia

Elastic Pull Refresh

A pull-to-refresh wrapper with a Skia Bézier sheet that stretches before releasing.

$9 for this animation

Checkout opens soon. Leave your email and we will tell you the moment you can buy it.

One email when checkout opens. No spam.

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

npx nativeanimation add elastic-pull-refresh

About this animation

A pull-to-refresh wrapper with a Skia Bézier sheet that stretches before releasing.

How it works

  1. A UI-thread pan value drives the content offset and Bézier control points.
  2. Crossing the threshold retains the elastic sheet while onRefresh is pending.
  3. A rotating bright marker and spring settle provide the completion flourish.

Install

npx expo install @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

<ElasticPullRefresh onRefresh={() => reload()}><ScrollView>{content}</ScrollView></ElasticPullRefresh>

Props

PropTypeDefaultDescription
childrenReactNode—Scroll content.
onRefresh() => Promise<void>—Refresh operation.
thresholdnumber104Trigger distance.
accentColorstring'#675CFF'Sheet color.

Compatibility

Expo SDK 57, React Native 0.86, Reanimated 4.5, and Skia 2.6. iOS, Android, and web are supported but await device verification.

Accessibility

The wrapper announces a busy progress state while refreshing. Reduced Motion disables spinner rotation and uses a firm settle.

More animations