react-native-ui-kit

Репозиторий UI kit на основе Prime Faces, Prime Flex для React Native

Installation

Yarn

yarn add \
  react \
  react-native \
  react-native-svg \
  react-native-reanimated

yarn add @cdek-it/react-native-ui-kit

npm

npm i \
  react \
  react-native \
  react-native-svg \
  react-native-reanimated

npm i @cdek-it/react-native-ui-kit

Шрифты

UI kit использует следующие виды шрифтов.

| Тип шрифта | Используемые начертания | Рекомендуемый шрифт | Рекомендуемый аналог | | ----------- | ---------------------------------------------- | ------------------- | -------------------- | | primary | – regular– demibold– demibold italic | TT Fellows | Noto Sans | | secondary | – regular– bold | Noto Sans | — |

Исходники шрифтов не поставляются вместе с пакетом, их требуется подключать отдельно. После подключения шрифтов в проект, необходимо указать их в ThemeContextProvider.

<ThemeContextProvider
  fonts={{ primary: 'MyFont', secondary: 'MySecondaryFont' }}
/>

После этого шрифты доступны через useUnistyles().theme.fonts или прямо в StyleSheet.create(({ fonts }) => ...).

ThemeContextProvider только настраивает темы и шрифты для unistyles. ThemeContext остается пустым и всегда имеет значение null.

Провайдер также принимает lightTheme и darkTheme, если нужно переопределить темы целиком.

Пример подключения шрифтов с помощью expo-fonts через плагин

[
  '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: 'Noto Sans',
          fontDefinitions: [
            { path: './assets/NotoSans-Bold.ttf', weight: 700 },
            { path: './assets/NotoSans-Regular.ttf', weight: 400 },
          ],
        },
      ],
    },
  },
],

Ручная установка

Android

1. Скопировать нужные шрифты в директорию android/app/src/main/res/font

2. Создать XML-ресурс для каждого шрифта

    <!-- xml_noto_sans.xml -->
   <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:font="@font/noto_sans_bold" app:fontStyle="normal" app:fontWeight="700"/>
    <font app:font="@font/noto_sans_regular" app:fontStyle="normal" app:fontWeight="400"/>
   </font-family>

   <!-- xml_tt_fellows.xml -->
   <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:font="@font/tt_fellows_demi_bold_italic" app:fontStyle="italic" app:fontWeight="600"/>
    <font app:font="@font/tt_fellows_demi_bold" app:fontStyle="normal" app:fontWeight="600"/>
    <font app:font="@font/tt_fellows_regular" app:fontStyle="normal" app:fontWeight="400"/>
   </font-family>

3. Добавить в метод onCreate() класса MainApplication следующий код:

    override fun onCreate() {
      super.onCreate()
   
      //подключение шрифтов
      ReactFontManager.getInstance().addCustomFont(this, "TT Fellows", R.font.xml_tt_fellows)
      ReactFontManager.getInstance().addCustomFont(this, "Noto Sans", R.font.xml_noto_sans)
   
      // остальной код...
    }

iOS

1. Добавить шрифты в проект Xcode

   Для этого открыть Xcode вашего проекта, создать новую группу Resources (опционально), перетащить туда файлы с шрифтами.

   Можно выбрать Copy files или Reference files, на ваш выбор

   

2. Добавить информацию о шрифтах в Info.plist

   <key>UIAppFonts</key>
   <array>
    <string>TTFellows-DemiBold.ttf</string>
    <string>TTFellows-DemiBoldItalic.ttf</string>
    <string>TTFellows-Regular.ttf</string>
    <string>NotoSans-Regular.ttf</string>
    <string>NotoSans-Bold.ttf</string>
   </array>

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)