В какой-то момент я хотел решить несколько проблем с UI частью в приложении на React Native: UI был слишком медленный. И здесь важно уточнить, что он был сделан с использованием styled-components. В приложении не было возможности темизации, потому что токены импортировались как модуль в каждом компоненте. И как следствие, в приложении невозможно было сделать темную тему, потому что при смене токенов оно бы просто не перерендерилось. Спойлер. Restyle решает обе проблемы, а еще дает дополнительные классные плюшки, о которых мы обязательно поговорим дальше в статье. The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus. Getting started | Restyle  Restyle предоставляет набор инструментов, которые позволят строить UI продуктов на основе токенов. Особенно очень хорошо такой подход залетает, когда в продукте есть Дизайн Система и этот набор токенов действительно определен. Одно из основных преимуществ библиотеки Restyle по сравнению с той же styled-system, в том, что она не использует styled-components под капотом. В основе Restyle используются абстрактные стили StyleSheet, поэтому ожидается более высокая производительность. Что мы понимаем под токенами? Это цвета, отступы, радиусы и так далее – все строгие ограничения, касающиеся стилей компонентов. У нас будет несколько групп токенов:      А дальше эти токены нужно расшарить на всё приложение, для этого библиотека Restyle предоставляет ThemeProvider: Компоненты Box и Text являются основными строительными блоками для UI. Box создается на основе View и нужен для оберток, Text нужен для текстовых элементов соответственно. Они создаются один раз, и дальше их просто можно переиспользовать. Text имеет свой собственный проп variant, где он как раз принимает значение токена типографики textVariant . Нет необходимости выносить стили отдельно или создавать отельные файлы. Стили можно добавлять прям в компоненте, используя Restyle компоненты Box и Text. Да, все правильно, мы будем писать стили прям в JSX. А почему это хорошо? Не нужно создавать бесконечные названия блоков (Container, Wrapper и т.д) Мы сразу видим всю картину целиком, за что отвечает каждый блок Стилей не так уж и много обычно Мы все равно часто добавляем стили в JSX, будет все однообразно Styled обертки сильно ухудшают производительность Но все эти плюсы будут работать, если вы будете декомпозировать сложные компоненты на небольшие модули. В полотне верстки это будет выглядеть плохо. Цвета можно пробрасывать во все цветовые пропсы, используя ключи из темы (например g200, g300, g400). backgroundColor [bg] color shadowColor textShadowColor borderColor В квадратных скобках сокращенный вариант пропса Посмотрим на пример, как это может использоваться: Все отступы тоже можно пробрасывать прям в компоненты, используя специальные пропсы для этого. В нашем случае они добавляют отступы, кратные 4px. margin [m], marginTop [mt], marginRight [mr], marginBottom [mb], marginLeft [ml], marginStart [ms], marginEnd[me], marginHorizontal [mx], marginVertical [my], padding [p], paddingTop [pt], paddingRight [pr], paddingBottom [pb], paddingLeft [pl], paddingStart [ps], paddingEnd [pe], paddingHorizontal [px], paddingVertical [py], gap [g], rowGap [rG], columnGap [cG] В квадратных скобках сокращенный вариант пропса Радиус тоже берется из темы и задается следующим образом: Через свойство style можно пробросить и обычные стили. Таким образом можно добавить разные исключения, например, если нужен отступ некратный 4 или цвет не из ДС. В моей ДС определены два размера девайсов, что позволяет указывать разные стили следующим образом: При помощи такой конструкции можно пробрасывать любые свойства, не только отступы. Если написать просто marginTop={1}, то стили применятся для всех устройств (s и m).  Если нам нужно написать какую-то логику в компоненте, опираясь на размеры девайсов, то можно использовать хук useResponsiveProp(): Нам не нужно импортировать нужные токены из темы, можно нужно просто достать их используя хук useTheme(). Это может пригодиться, если нам нужно пробросить именно значение цвета в сторонний компонент. Я произвел исследование по производительности 3 вариантов и получил интересные результаты! Для теста был создан следующий компонент: Компонент содержал 100 строк В каждой строке был номер, созданный шрифтом из ДС В каждой строке было 20 блоков, с радиусом из ДС и рандомным цветом из ДС Проводилось 10 замеров рендера для каждого варианта, затем для результата бралось среднее значение. Измерялось время рендера следующим образом:  Вариант UI Время рендера (милисекунды) StyleSheet 408 Restyle 499 Styled-components 632 Оказалось, что Restyle значительно быстрее Styled-components, но естественно немного медленнее вообще нативного решения, потому что содержит дополнительные обертки и парсер атрибутов в стили. Что мы получаем от Restyle: Удобные “строительные блоки” Box и Text Удобная работа с токенами ДС через атрибуты Все токены достаются через хуки из Restyle контекста Удобочитаемые композиции верстки сразу со стилями Понятная и однозначная концепция для построения UI  Эта библиотека точно заслуживает внимания. Не вижу причин не брать ее на вооружение прям сейчас! Спасибо за внимание 🙂  Senior Frontend-разработчик