React Native Elements — установка и темы

React Native Elements (RNE) — библиотека переиспользуемых UI-компонентов для React Native с поддержкой TypeScript. В статье показано, как установить RNE в проекты, создать тему, расширить типы для TypeScript и когда выбирать RNE вместо чистого React Native. В конце — чеклисты, критерии приёмки и рекомендации по миграции.

компьютер с открытым IDE и кодом калькулятора

Что такое React Native Elements

React Native Elements — это открытая библиотека компонентов, созданная сообществом разработчиков React Native. Она предоставляет более 30 компонентов с продуманной структурой и поддержкой TypeScript. Компоненты нацелены на совместимость с Android, iOS и web и помогают быстро выстроить единый визуальный стиль приложения.

Краткое определение терминов

Компонент: переиспользуемый UI-блок (например, Button, Input).
Тема: набор глобальных стилей, применяемых ко всем компонентам.

Почему использовать RNE

Быстрая сборка интерфейса без ручной проработки каждой детали.
Единый API для множества компонентов.
Поддержка TypeScript упрощает автодополнение и безопасные расширения темы.

Важно

RNE удобен, когда вам нужна скорость и единообразие. Если приложение требует уникального дизайна с тонкой анимацией и производительностью на грани, возможно, стоит писать компоненты вручную.

Установка в проект, созданный с помощью React Native CLI

В проекте с bare React Native установите пакеты RNE командой:

npm install @rneui/themed @rneui/base

Также установите react-native-vector-icons и safe-area-context:

npm install react-native-vector-icons react-native-safe-area-context

Установка в Expo проект

В существующем Expo проекте используйте yarn:

yarn add @rneui/themed @rneui/base react-native-safe-area-context

Совет

Используйте один пакетный менеджер (npm или yarn) в проекте, чтобы избежать конфликтов зависимостей. В проектах, созданных через expo cli, react-native-vector-icons обычно установлен по умолчанию.

Стилизация отдельных компонентов RNE

Все компоненты RNE принимают props для стилизации самого компонента и контейнера вокруг него. Контейнер — это стандартный с пропом containerStyle. Компонент принимает универсальные props (color, type, size) и уникальные кастомные props (например, buttonStyle для Button).

Пример стилизации Button:

import { View } from "react-native";  
import { Button } from "@rneui/themed";  
  
const MyComponent = () => {  
  return (

Один Button использует prop type по умолчанию, другой — buttonStyle. Оба используют containerStyle для внешнего .

Создание тем для компонентов RNE

Темы удобны, когда нужно применить один стиль ко всем экземплярам компонента. RNE предоставляет функцию createTheme(), которая формирует объект темы и переопределяет внутренние стили компонентов.

Пример создания темы:

import { ThemeProvider, createTheme } from '@rneui/themed';  
  
const theme = createTheme({  
    components: {  
      Button: {  
        containerStyle: {  
          margin: 10,  
        },  
        titleStyle: {  
          color: "black",  
        },  
      },  
    },  
});

ThemeProvider применит тему ко всем компонентам внутри:

Экран мобильного приложения с внешне стилизованной кнопкой, созданной с помощью React Native Elements

Экран мобильного приложения с кнопкой, стилизованной через тему React Native Elements

Закрыть

Важно

Стили темы переопределяют внутренние значения, но не перезаписывают внешние (external) стили, переданные непосредственно компоненту. Порядок приоритетов RNE ставит внешние стили на самый высокий уровень.

Пример приоритета:

// Theme  
const theme = createTheme({  
    components: {  
      Button: {  
        containerStyle: {  
          margin: 10,  
          backgroundColor: "red",  
        },  
      },  
    },  
});  
  
// Component

В этом коде backgroundColor кнопки будет цветом, заданным через color=”secondary”, а не красным из темы.

Доступ к объекту темы

RNE предоставляет несколько способов доступа к теме:

ThemeConsumer — компонент-обёртка.
useTheme() — хук для функциональных компонентов.
makeStyles() — генератор, похожий на StyleSheet, для разделения стилей.

Пример ThemeConsumer:

import React from 'react';  
import { Button } from 'react-native';  
import { ThemeConsumer } from '@rneui/themed';  
  
const MyComponent = () => (  
    
    {({ theme }) => (

Пример useTheme():

import React from 'react';  
import { Button } from 'react-native';  
import { useTheme } from '@rneui/themed';  
  
const MyComponent = () => {  
  const { theme } = useTheme();  
  
  return (

makeStyles помогает держать стили отдельно и ссылаться на тему внутри функции генерации стилей.

Расширение тем в TypeScript

RNE поддерживает декларации TypeScript. Слияние деклараций (declaration merging) позволяет расширять типы темы, добавляя свои цвета и пропы.

Пример файла TypeScript.ts:

// TypeScript.ts  
  
import '@rneui/themed';  
  
declare module '@rneui/themed' {  
  export interface Colors {  
    primaryLight: string;  
    secondaryLight: string;      
  }  
}

После этого можно добавить новые цвета в createTheme:

const theme = createTheme({  
  colors: {  
    primaryLight: "",  
    secondaryLight: ""  
  },  
})

Теперь кастомные цвета доступны через ThemeProvider, ThemeConsumer и useTheme().

Когда выбирать RNE, а когда чистый React Native

Ментальная модель

Скорость разработки важнее тонкой оптимизации → выбирайте RNE.
Нужна сверхоптимизация производительности или уникальный дизайн → пишите компоненты сами.

Контрпример

Если приложение — игра или интерфейс с большим количеством анимаций и кастомного рендеринга, готовая библиотека может ограничивать; в этом случае собственная реализация будет лучше.

Альтернативы RNE

NativeBase — большая библиотека с собственными паттернами и темами.
React Native Paper — ориентирована на Material Design.
Собственные компоненты — когда важна каждая оптимизация.

Выбор зависит от дизайн-системы и требуемой визуальной совместимости с платформами.

Быстрый SOP для темизации в команде

Выделите ответственного за дизайн-систему.
Создайте базовую тему с createTheme.
Поместите ThemeProvider как верхний обёрток приложения.
Включите makeStyles для компонентных стилей.
Документируйте кастомные цвета и компоненты в README.
Добавляйте новые значения темы через TypeScript декларации.

Чеклист при миграции на RNE

Пройти инвентаризацию используемых компонентов UI.
Сопоставить существующие компоненты с эквивалентами в RNE.
Написать миграционный план по экрану.
Определить тему и глобальные переменные (цвета, шрифты).
Покрыть критичные экраны тестами на регрессии.

Критерии приёмки

Все экраны соответствуют дизайн-гайдам по цветам и отступам.
Никаких визуальных регрессий на основных устройствах.
Производительность в эталонных сценариях не ухудшилась.

Примеры тест-кейсов

Открыть экран с кнопками и проверить, что контейнеры получили ожидаемые отступы из темы.
Изменить тему в рантайме и убедиться, что компоненты обновились.
Передать внешние стили и проверить, что они имеют приоритет над темой.

Безопасность и приватность

RNE сам по себе не обрабатывает пользовательские данные. Но зависимости (react-native-safe-area-context, react-native-vector-icons) следует держать обновлёнными. В мобильном приложении соблюдайте общие практики: минимизируйте права доступа, шифруйте сетевые запросы и не храните чувствительные данные в открытом виде.

Короткий глоссарий

ThemeProvider — компонент, который предоставляет тему.
theme — объект с глобальными стилями и цветами.
createTheme — функция для создания темы.
makeStyles — генератор стилей, использующий тему.

Итог

React Native Elements ускоряет разработку, повышает согласованность интерфейса и поддерживает TypeScript. Выбирайте RNE, когда важна скорость разработки и стабильный набор UI-компонентов. При необходимости тонкой настройки сохраняйте внешние стили за компонентами и используйте темы для глобальных изменений.

Краткие выводы