Теми на основі токенів
Кожна поверхня - колір, відступ, радіус, типографіка, тінь - це іменований токен. Перемикайте світлу / темну / власну тему через один провайдер; компоненти читають лише токени, тому одна зміна поширюється по всій системі.
Native-UI
Дизайн-система для React Native
Дизайн-система для React Native - компоненти з нативним відчуттям на iOS та Android.
Інструмент для розробників
Офіційна сторінка продукту
Видавець:
POLPROG
Офіційна сторінка продукту
40+
Компонентів
2
Платформи
100%
TypeScript
MIT
Ліцензія
01 / Native-UI
Про застосунок
Native-UI - це дизайн-система для React Native, побудована на токенах, темах та примітивах з пріоритетом доступності. Включає 32 компоненти та 9 примітивів компонування - Button, Input, Select, BottomSheet, HeaderBar, ListItem, Toast, Modal та інші - кожен коректно працює на iOS та Android, з повною підтримкою світлої / темної тем, reduce-motion та типізованими API. Опублікована як @polprog/native-ui в npm, використовується у кількох внутрішніх мобільних продуктах і тепер публічно доступна під ліцензією MIT.
02 / Застосування
Що це розвʼязує
Проблема
- Той самий екран пишете двічі, під кожну платформу
- Відступи, кольори й темна тема розходяться
- Підписи для читачів екрана дороблюєте наприкінці
Результат
- Один компонент поводиться природно на обох системах
- Усі екрани беруть вигляд з одного місця
- Доступність закладена в компонентах від початку
Для кого
- Розробники React Native та Expo
- Команди з одним застосунком для iOS та Android
- Хто відповідає за доступність застосунку
03 / Ключові можливості
Ключові можливості
Найважливіші можливості з практичними поясненнями.
40+ компонентів та примітивів
32 продакшн-компоненти - Button, Input, Select, BottomSheet, HeaderBar, ListItem, Modal, Toast, Switch, Checkbox, Radio, Card, Avatar, Badge, Chip, Spinner, Skeleton, SearchBar та інші - плюс 9 примітивів компонування (Box, Stack, Heading, Text, Divider).
Нативна поведінка для кожної платформи
iOS використовує нативний зворотний зв'язок при натисканні SF та розміри аркушів; Android використовує ripple та Material elevation. Одні й ті ж пропси - правильна поведінка для кожної платформи без платформозалежного коду у вашому додатку.
Доступність в першу чергу
Кожен інтерактивний компонент постачається з мітками, зонами дотику, порядком фокусу, ролями для скрінрідерів та повагою до reduce-motion. Перевизначайте будь-які налаштування за замовчуванням для конкретного екземпляра за потреби.
Повністю типізований API
100% TypeScript. Вичерпні типи пропсів, варіанти та контракти тем автодоповнюються в редакторі - помилки використання виявляються до виконання.
Нуль залежностей часу виконання
Жодних бібліотек стилів, жодних важких UI-фреймворків - лише сам React Native плюс тонкий провайдер теми. Мінімальний розмір встановлення, відсутність ризику блокування версій.
04 / Завантажити
Доступ до продукту
Зрозумілий шлях від офіційного джерела до першого успішного використання.
Виберіть потрібну платформу
Скористайтеся одним з офіційних посилань для свого пристрою або браузера.
Установіть або відкрийте
Дотримуйтеся інструкцій магазину або відкрийте вебзастосунок. Без сторонніх інсталяторів.
Налаштуйте та почніть
Перегляньте параметри, виберіть уподобання та почніть з основного робочого процесу.
Офіційні варіанти доступу
05 / Технології
Технології продукту
Прозорий огляд основних технологій, використаних для створення та підтримки продукту.
React Native
TypeScript
Expo