Pull Refresh Island
A gooey pull-to-refresh where a water drop is pulled out of the Dynamic Island.
Prerequisites
This animation is built on the following libraries. expo install pins the versions that match your SDK, and the CLI tells you exactly which ones are missing when you add the component.
npx expo install react-native-reanimated react-native-gesture-handler @shopify/react-native-skia expo-haptics react-native-safe-area-context react-native-css
Install
npx @rslab/cli add pull-refresh-island
Usage
import { PullRefreshIsland } from '@/components/ui/PullRefreshIsland';
<PullRefreshIsland onRefresh={async () => await reload()}>
{/* scrollable content */}
</PullRefreshIsland>;Props
| Prop | Type | Default | Description |
| --------------------------- | ----------------------------- | ------- | ------------------------------------------- |
| onRefresh | () => Promise<void> \| void | none | Called on release past the threshold. |
| threshold | number | 100 | Pull distance (pt) that triggers a refresh. |
| className | string | none | Container classes (NativeWind). |
| contentContainerClassName | string | none | Classes for the scroll content wrapper. |
See exactly how this works with an RSLAB subscription.
Get Pro