State screen
What a screen says when it has nothing to show, when it failed, or when the network is gone: an icon, a title in plain words, the reason and the way out — announced as it should be. With the slim offline banner for a screen that still shows saved data.
« Empty », son histoire React Native à la largeur d’un téléphone — le même code sur iOS et Android.
Mobile uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.
- Web · n/a. On the web these are the empty state and the error page. → Empty state
- Bureau · n/a. The Mac app's window is the web: its states are the empty state and the error page. → Empty state
Pourquoi il est là. the native apps: Yomizaka and Akinaza mobile, Orazaka mobile: the empty, error and offline screens (krizaka-ui#753, #741).
Quand l’utiliser
- A list or a screen with nothing in it yet.
- A request that failed and can be retried.
- The network is gone: the banner when saved data shows, the full state when nothing does.
Quand ne pas l’utiliser
- A small empty region inside a card.À la place : Empty state
- The app is in maintenance or must be updated.À la place : Maintenance screen
Installation
Installer
npx expo install react-native-svg
npm install @krizaka/uiImporter
import { StateScreen, OfflineBanner } 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.
Empty
Nothing yet, and the one way to fill it.
Error
What failed in plain words, Try again, and a quieter way to get help.
Offline
The slim banner over the saved data, and the full state when there is none.
Props
StateScreen
The empty, error and offline screens. An error is announced as an alert, an offline state as a status; an empty one is just there.
| Prop | Type | Défaut | Description |
|---|---|---|---|
kindrequis | StateKind | — | empty (nothing yet), error (it failed) or offline (no network). |
titlerequis | string | — | What happened, in a few words (“No notifications yet”). Passed translated. |
action | StateAction | — | The way out: Try again, Add one, Open settings. |
description | string | — | Why, and what to do. |
icon | ReactNode | — | Replaces the icon of the kind. |
inline | boolean | — | Fills its parent and centres (default), or sits in the flow of a list (inline). |
secondary | StateAction | — | A quieter second way out (Contact support). |
style | ViewStyle | — | Styles merged last. |
testID | string | — | For tests. |
OfflineBanner
A slim strip at the top of a screen that still shows saved data while the network is gone.
| Prop | Type | Défaut | Description |
|---|---|---|---|
labelrequis | string | — | “You're offline. Showing what was saved.” Passed translated. |
actionLabel | string | — | “Try again”. |
onAction | (() => void) | — | Called by the action. |
testID | string | — | For tests. |
Accessibilité
- An error is announced as an alert, an offline state as a status; an empty state is just a heading and a button.
- The icon is decorative; the title is the heading.
Bonnes pratiques
- Say what happened in a few words and what to do: « We could not load your files » and « Try again », never « Error 500 ».
- One main way out (
action), a quieter second (secondary). An empty state's way out is how to fill it. inlineputs the state in the flow of a list; by default it fills its parent and centres.- The app detects the network (NetInfo) and passes the state: this component never reaches for the network itself.
Composants liés
Générée depuis le code de @krizaka/ui 3.69.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub