React Native Unicorn — UI Kit

Published in

react-native-init

4 min readMar 29, 2020

Так как верстка компонентов занимает примерно до 60% от всего кода моих уроков, то я решил вынести все компоненты в отдельную библиотеку, тем самым, в последующих уроках, мы сфокусируемся на бизнес логике, а не на верстке компонентов.

UI Kit Unicorn поддерживает темный и светлый режим.

Поехали!

Step 1

Добавляем библиотеку:

yarn add react-native-unicorn-uikit

Step 2

Добавляем зависимости:

yarn add react-native-appearance react-native-screens @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-spinkit yup formik faker

Step 3

Добавляем библиотеку с иконками:

yarn add react-native-vector-icons

Внимательно добавляем иконки как написано здесь

Step 4

Устанавливаем Pods:

 cd ios && pod install && cd ..

Step 5

Добавляем шрифты:

Создаем файл в корне проекта /react-native.config.js

module.exports = {
 project: {
 ios: {},
 android: {}
 },
 assets: ['./assets/fonts/']
}

Качаем шрифты здесь и после в cозданную директорию ./assets/fonts/ кладем их, а после линкуем.

react-native link

Если, как и я, получаете эти предупреждения: warning: duplicate output file errors, то перейдите в Xcode и удалите дубликаты шрифтов, кроме подключенных.