Wszystkie komponenty

Widok przyjmujący jako propsy tokeny odstępów, koloru, zaokrągleń i elewacji.

• Propsy padding i margin
• Tło w kolorze motywu
• Zaokrąglenia i 6 poziomów elewacji

Stosy pionowe i poziome z odstępami opartymi na tokenach.

• VStack i HStack
• Odstęp z tokenów spacingu
• Wyrównanie, rozkład i zawijanie

Prymityw typograficzny powiązany ze skalą typografii motywu.

• 18 wariantów typografii
• Tokeny kolorów motywu
• Czytelne kolory akcentu

Tekst z rolą nagłówka, oparty na stylach nagłówków.

• Poziomy 1-3 i 2 rozmiary display
• Rola nagłówka dla czytników ekranu

Cienki poziomy separator (hairline).

• Wcięcie z obu stron
• Grubość z tokenów

Pressable ze sprężynowym skalowaniem Reanimated przy naciśnięciu.

• Konfigurowalna skala
• Respektuje ograniczenie ruchu
• Obwódka fokusu klawiatury

Jednoliniowy tekst, który przewija się tylko wtedy, gdy się nie mieści.

• Wykrywanie przepełnienia
• Konfigurowalna prędkość i pauza
• Statyczny przy ograniczeniu ruchu

Animowany wskaźnik strony lub kroku.

• Aktywna kropka się poszerza
• Ogłasza bieżący krok

Mała etykieta wielkimi literami (overline) z rolą nagłówka.

• Domyślnie wielkie litery
• Własna transformacja i kolor

Rysowany zestaw ikon, który wygląda tak samo na iOS i Androidzie.

• 12 glifów
• Chevrony odbijane w RTL
• Ukryte przed czytnikami ekranu

Klikalny kafelek z podbarwionym chipem ikony i etykietą.

• 5 tonów
• Sprężynowa skala naciśnięcia
• Lekka haptyka przy naciśnięciu

Okrągły awatar ze zdjęciem lub inicjałami.

• 4 rozmiary (sm-xl)
• Inicjały z imienia i nazwiska
• Własne tło inicjałów

Licznik, krótka etykieta lub kropka statusu.

• 5 wariantów kolorów
• Limit przepełnienia (99+)
• Tryb kropki

Modalny arkusz wysuwany od dołu.

• Przeciągnij w dół, aby zamknąć
• Części Header, Body i Footer
• Omijanie klawiatury
• Gest wyjścia w czytniku ekranu

Dolny pasek zakładek z animowaną pigułką aktywnej zakładki.

• Plakietki na zakładkach
• Role zakładek ze stanem wybrania
• Inset safe area

Główny przycisk akcji z wariantami, rozmiarami, stanem ładowania i ikonami.

• 5 wariantów
• 3 rozmiary (sm/md/lg)
• Stan ładowania
• Naciśnięcie haptyczne

Powierzchnia z motywem, która staje się klikalna po przekazaniu handlera.

• 4 poziomy elewacji
• 3 rozmiary gęstości
• Sloty nagłówka i stopki

Pole wyboru z opcjonalną etykietą.

• 2 rozmiary
• Rola i stan checkboxa
• Lekka haptyka przy przełączeniu

Wybieralny chip lub tag filtra.

• 3 warianty i 3 kształty
• Ikona na początku
• Układ ChipGroup

Świętujący wybuch konfetti, który nigdy nie blokuje dotyku.

• Konfigurowalna liczba cząstek
• Wystrzeliwuje po pokazaniu
• Respektuje ograniczenie ruchu

Samoaktualizujące się odliczanie do terminu.

• 4 formaty
• Lokalizowalne jednostki
• Etykieta i callback po upływie czasu

Pole daty, godziny lub daty z godziną.

• 3 tryby
• Data minimalna i maksymalna
• Możliwość wyczyszczenia
• Tylko do odczytu, gdy brak pickera

Pola daty początkowej i końcowej dla zakresu.

• Początek i koniec wzajemnie się ograniczają
• Osobny błąd dla początku i końca
• Możliwość wyczyszczenia

Wyśrodkowany stan pusty z ikoną, tytułem, komunikatem i akcją.

• 3 rozmiary
• Slot akcji
• Rola podsumowania

Error boundary z widokiem awaryjnym i opcją ponowienia.

• Reset keys
• Własny render widoku awaryjnego
• HOC withErrorBoundary

Podpis błędu wyświetlany pod polami formularza.

• Rola alertu
• Region live w trybie polite

Etykieta pola wielkimi literami z oznaczeniem pola wymaganego.

• Oznaczenie pola wymaganego
• Ogłaszane jako wymagane

Nagłówek ekranu z przyciskiem wstecz, tytułem i akcjami.

• Zwykły i duży tytuł
• Tytuł wyśrodkowany lub do lewej
• Chevron wstecz odbijany w RTL

Okrągły przycisk z samą ikoną.

• 4 warianty i 3 rozmiary
• Wbudowany hit slop
• Lekka haptyka

Pole tekstowe z etykietą, błędem i obramowaniem fokusu.

• Etykieta, błąd i pole wymagane
• Przekazuje ref i propsy TextInput
• Obsługa wielu linii

Wieloplatformowe okno dialogowe z polem tekstowym.

• Systemowy Alert.prompt na iOS
• Modal z motywem na Androidzie
• Lokalizowane przyciski

Dolny pasek akcji, który pozostaje nad klawiaturą.

• Unosi się razem z klawiaturą
• Domyślnie włączone na Androidzie

Nagłówek listy lub strony w czterech rozmiarach.

• 4 rozmiary
• Opcje transformacji tekstu
• Rola nagłówka

Wiersz listy z ikoną, podtytułem, wartością i chevronem.

• Chevron, gdy wiersz jest klikalny
• Styl destrukcyjny
• Własne sloty

Grupowana sekcja listy z tytułem i notką w stopce.

• Grupowana karta lub osobne wiersze
• Tytuł i notka w stopce

Wiersz listy z wbudowanym przełącznikiem.

• Wbudowany przełącznik
• Ikona i podtytuł

Wyśrodkowane okno dialogowe z tłem, tytułem i stopką.

• Części Header, Body i Footer
• Zamknięcie kliknięciem w tło
• Gest wyjścia w czytniku ekranu

Poziomy pasek postępu o określonej wartości.

• Kolor semantyczny lub własny
• Rola paska postępu z wartością
• Konfigurowalna wysokość

Pojedyncza opcja radio z opcjonalną etykietą.

• Kontrolowany wybór
• Rola radio
• Lekka haptyka

Kontener ekranu z safe area i maksymalną szerokością na tabletach.

• Górna i dolna safe area
• Wyśrodkowana treść na tabletach
• Opcjonalny padding

Pole wyszukiwania z debounce i przyciskiem czyszczenia.

• Wbudowany debounce
• Przycisk czyszczenia
• Lewy i prawy slot

Sekcja treści z tytułem i akcją.

• Tytuł jako nagłówek
• Slot akcji

Kontrolka segmentowa jednokrotnego wyboru w stylu iOS.

• Grupa radio dla czytników ekranu
• Typowane wartości
• Lekka haptyka

Wybór jednej wartości z opcjami w dolnym arkuszu.

• Picker w BottomSheet
• Ikony opcji
• Etykieta, błąd i pole wymagane

Wiersz ustawień z zaokrąglonym kafelkiem ikony.

• Kafelek ikony
• Styl destrukcyjny
• Wariant SettingsSwitchRow

Animowany placeholder ładowania.

• Preset Card
• Respektuje ograniczenie ruchu
• Lokalizowana etykieta ładowania

Wyśrodkowany wskaźnik aktywności z opcjonalną etykietą.

• 2 rozmiary
• Ogłaszany czytnikom ekranu

Kafelek statystyki z etykietą, wartością i podpisem.

• 5 tonów
• 3 rozmiary
• Cyfry tabelaryczne

Natywny przełącznik z motywem, etykietą i podtytułem.

• Cały wiersz klikalny
• Lekka haptyka
• Etykieta odczytywana z podtytułem

Wieloliniowe pole z etykietą i błędem.

• Minimalna wysokość w liniach
• Etykieta, błąd i pole wymagane

Imperatywny toast montowany raz w korzeniu aplikacji.

• 5 wariantów
• Pozycja u góry lub na dole
• Przycisk akcji
• Komunikaty dla czytników ekranu