https://github.com/cdek-it/react-native-ui-kit
Библиотека компонентов на базе React Native
https://github.com/cdek-it/react-native-ui-kit
Last synced: 2 months ago
JSON representation
Библиотека компонентов на базе React Native
- Host: GitHub
- URL: https://github.com/cdek-it/react-native-ui-kit
- Owner: cdek-it
- License: mit
- Created: 2025-10-10T06:51:22.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-23T17:48:57.000Z (6 months ago)
- Last Synced: 2025-12-25T07:47:24.714Z (6 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@cdek-it/react-native-ui-kit
- Size: 2.31 MB
- Stars: 3
- Watchers: 0
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Agents: AGENTS.md
Awesome Lists containing this project
README
# react-native-ui-kit
Репозиторий UI kit на основе Prime Faces, Prime Flex для React Native
## Installation
**Yarn**
```shell
yarn add \
react \
react-native \
react-native-svg \
react-native-reanimated
```
```shell
yarn add @cdek-it/react-native-ui-kit
```
**npm**
```shell
npm i \
react \
react-native \
react-native-svg \
react-native-reanimated
```
```shell
npm i @cdek-it/react-native-ui-kit
```
## Шрифты
UI kit использует следующие виды шрифтов.
| Тип шрифта | Используемые начертания | Рекомендуемый шрифт | Рекомендуемый аналог |
| ----------- | ---------------------------------------------- | ------------------- | -------------------- |
| `primary` | – regular
– demibold
– demibold italic | TT Fellows | PT Sans |
| `secondary` | – regular
– bold | PT Sans | — |
Исходники шрифтов не поставляются вместе с пакетом, их требуется подключать
отдельно. После подключения шрифтов в проект, необходимо указать их в
`ThemeContextProvider`.
```tsx
```
### Пример подключения шрифтов с помощью expo-fonts через плагин
```ts
[
'expo-font',
{
android: {
fonts: [
{
fontFamily: 'TT Fellows',
fontDefinitions: [
{
path: './assets/fonts/TTFellows-DemiBoldItalic.ttf',
weight: 600,
style: 'italic',
},
{
path: './assets/fonts/TTFellows-DemiBold.ttf',
weight: 600,
},
{ path: './assets/fonts/TTFellows-Regular.ttf', weight: 400 },
],
},
{
fontFamily: 'PT Sans',
fontDefinitions: [
{ path: './assets/fonts/PTSans-Bold.ttf', weight: 700 },
{ path: './assets/fonts/PTSans-Regular.ttf', weight: 400 },
],
},
],
},
},
],
```
### Ручная установка
#### Android
1. Скопировать нужные шрифты в директорию `android/app/src/main/res/font`
2. Создать XML-ресурс для каждого шрифта
```xml
```
```xml
```
3. Добавить в метод `onCreate()` класса
[MainApplication](./android/app/src/main/java/ru/cdek/uikit/prime/MainApplication.kt)
следующий код:
```kotlin
override fun onCreate() {
super.onCreate()
//подключение шрифтов
ReactFontManager.getInstance().addCustomFont(this, "TT Fellows", R.font.xml_tt_fellows)
ReactFontManager.getInstance().addCustomFont(this, "PT Sans", R.font.xml_pt_sans)
// остальной код...
}
```
#### iOS
1. Добавить шрифты в проект Xcode
Для этого открыть Xcode вашего проекта, создать новую группу Resources
(опционально), перетащить туда файлы с шрифтами.
Можно выбрать Copy files или Reference files, на ваш выбор
2. Добавить информацию о шрифтах в [Info.plist](./ios/CDEKUI/Info.plist)
```xml
UIAppFonts
TTFellows-DemiBold.ttf
TTFellows-DemiBoldItalic.ttf
TTFellows-Regular.ttf
PTSans-Bold.ttf
PTSans-Regular.ttf
```
## Dependencies
Для использования данной библиотеки необходимо:
- react версии - начиная с 18 major версии (от 18.0.0)
- react-native - любой версии(оптимально - от 0.74)
- @tabler/icons-react-native - начиная с 3 major версии(от 3.0.0)
- react-native-svg - начиная с 15 major версии(от 15.0.0)
- react-native-reanimated - начиная с 3 major версии(от 3.0.0)