Pull to refresh
The platform's pull to refresh in the theme's accent, for any ScrollView or FlatList.
Mobile uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A ScrollView or a FlatList the app draws itself: a feed, a profile.
Quand ne pas l’utiliser
- In a
List: itsonRefreshdraws it already.À la place : List
Installation
Installer
npx expo install react-native-svg
npm install @krizaka/uiImporter
import { PullToRefresh } from "@krizaka/ui/native";Enveloppez l’application une fois dans ThemeProvider de @krizaka/ui/native : chaque composant lit ses rôles de couleur.
Exemples
React Native n’a pas d’aperçu en direct sur le web : chaque exemple montre la capture de sa story, testée dans les deux thèmes, et le code à copier.
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 | Défaut | Description |
|---|---|---|---|
label | string | — | The words of the pull (“Pull to refresh”) — passed translated; shown on iOS under the spinner. |
Accessibilité
- The platform's control: announced by the system while it refreshes.
- Offer a refresh button too where pulling is hard (a short screen).
Bonnes pratiques
- Keep
refreshingtrue until the new data is there. - Do not refresh on every focus: a pull is the person's choice.
Composants liés
Générée depuis le code de @krizaka/ui 3.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.