Pull to refresh
The platform's pull to refresh in the theme's accent, for any ScrollView or FlatList.
Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.
When to use
- A ScrollView or a FlatList the app draws itself: a feed, a profile.
When not to use
- In a
List: itsonRefreshdraws it already.Use instead: List
Installation
Install
npx expo install react-native-svg
npm install @krizaka/uiImport
import { PullToRefresh } from "@krizaka/ui/native";Wrap the app once in ThemeProvider from @krizaka/ui/native: every component reads its colour roles.
Examples
React Native has no live preview on the web: each example shows the screenshot of its story, tested in both themes, and the code to copy.
A feed
The spinner at the top of a ScrollView, in the accent.
Props
The platform's pull to refresh in the theme's accent: the refreshControl of a ScrollView or a FlatList. List
draws it already with onRefresh.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The words of the pull (“Pull to refresh”) — passed translated; shown on iOS under the spinner. |
Accessibility
- The platform's control: announced by the system while it refreshes.
- Offer a refresh button too where pulling is hard (a short screen).
Best practices
- Keep
refreshingtrue until the new data is there. - Do not refresh on every focus: a pull is the person's choice.
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Progress
How far a task or a goal has come: a bar or a ring — with its words and time left, what is buffered ahead, its steps as segments, and a paused or failed state that says where it stopped.
Skeleton
A placeholder the shape of what is loading — lines, circles, blocks, or the real component turned into its own skeleton (SkeletonShape) — crossed by one reflection of the brand light.