Даже если вы разрабатываете MVP в условиях жестких сроков, не стоит забывать: результатом нашей работы будет приложение, которым будут пользоваться реальные люди. Причем первыми пользователями вполне могут оказаться инвесторы, заказчики или стейкхолдеры, которые оценивают продукт на ранней стадии.

И будет здорово, если их первая реакция будет не «ну, работает», а «вау, это выглядит как полноценный продукт».

Почему разработчикам вообще стоит задумываться о пользовательском опыте? Кажется, что это зона ответственности product/project-менеджеров, UX-дизайнеров и аналитиков. Но на практике у разработчиков в мобильных проектах есть довольно большая свобода влиять на UX-детали.

Более того, многие мелкие улучшения интерфейса стоят буквально десятки строк кода и несколько минут времени, но при этом заметно повышают ощущение «живости» приложения.

Меня зовут Алексей Цуцоев, я Frontend TeamLead в KODE. В этой статье разберем несколько библиотек, которые позволяют быстро улучшить UX React Native-приложения без значительных затрат на разработку.

Анимации

Инструмент: react-native-reanimated
Аналоги: встроенный Animated API

Пожалуй, это одна из самых важных библиотек для любого серьезного React Native-проекта.

react-native-reanimated предоставляет мощный API для создания плавных анимаций, которые выполняются на UI-потоке, а не на JS-потоке. Это принципиально важно для производительности.

Кроме того, библиотека давно поддерживает новую архитектуру React Native (Fabric + TurboModules), которая стала обязательной в последних версиях RN (включая 0.82).

Если вы планируете использовать сложные анимации, то практически нет причин не использовать Reanimated.

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

Плюсы:

Удобный и мощный API
Высокая производительность благодаря работе на UI-потоке
Большое сообщество и активная поддержка

Минусы:

Относительно сложная установка и настройка (особенно для новичков)
При обновлении React Native у вас 100% возникнут проблемы с этой библиотекой, но все решаемо.

Вибро-отклик

Инструмент: react-native-haptic-feedback
Аналоги:

Эта библиотека позволяет добавлять виброотклик (haptic feedback) при действиях пользователя.

На первый взгляд это мелочь, но тактильный отклик значительно усиливает ощущение взаимодействия с интерфейсом. Пользователь получает дополнительный сигнал, что действие действительно произошло.

Это может быть полезно, например:

при нажатии кнопок
при подтверждении действий
при успешных операциях
при ошибках

Часто удобно добавить декоратор для кнопочных компонентов, чтобы фидбэк автоматически срабатывал при нажатии.

import React, { useCallback, FC } from 'react';
import { GestureResponderEvent, Pressable, PressableProps } from 'react-native';

import ReactNativeHapticFeedback from 'react-native-haptic-feedback';

type Props = PressableProps & {
 withFeedback?: boolean;
};

export const CustomPressable: FC<Props> = ({
 withFeedback,
 onPressOut,
 ...rest
}) => {
 const onPressOutWithFeedback = useCallback(
   (event: GestureResponderEvent) => {
     onPressOut?.(event);

     if (withFeedback) {
       ReactNativeHapticFeedback.trigger('impactLight');
     }
   },
   [onPressOut],
 );

 return <Pressable {...rest} onPressOut={onPressOutWithFeedback} />;
};
```

Пример простой обертки:

На практике лучше сделать собственную обертку, чтобы можно было:

централизованно управлять типами вибрации
разделять поведение для iOS и Android
отключать фидбэк в определенных сценариях

Плюсы:

Простое API
Быстрое внедрение
Минимальное влияние на производительность

Минусы:

На некоторых Android-устройствах отклик может работать непредсказуемо
Библиотека обновляется не слишком активно, хотя существуют альтернативы.

Скелетоны вместо лоадеров

Инструмент: react-native-skeleton-placeholder
Аналоги: существует много решений разной степени актуальности.

Хорошей практикой будет показывать пользователю не просто спиннер загрузки, а skeleton-элементы, которые повторяют структуру будущего контента.

Почему это важно:

пользователь понимает, что именно сейчас загружается
интерфейс выглядит быстрее
нет резкого «прыжка» контента после загрузки

react-native-skeleton-placeholder позволяет создавать анимированные скелетоны с эффектом shimmer, которые выглядят достаточно нативно.

Важно придерживаться правила: скелетон должен максимально повторять финальную верстку контента.

Это нужно для того, чтобы избежать layout shift, когда элементы резко меняют размер после загрузки данных.

Плюсы:

Большой набор настроек
Поддержка анимаций
Простая интеграция

Минусы:

Специфический способ верстки, к которому нужно привыкнуть
Добавляет дополнительное время разработки, особенно если интерфейс сложный.

Скейлинг интерфейса

Инструменты: react-native-responsive-screen, react-native-responsive-fontsize
Аналог: написать собственное решение

Одна из проблем верстки для мобильных девайсов в том, что размеры в ней задаются в пикселях или процентах. То если вы задали width: 100, то ширина будет одинакова для всех девайсов, вне зависимости от размеров экрана.

Поэтому важно продумать масштабирование элементов интерфейса. Особенно это актуально для баннеров, карточек, крупных UI-блоков, типографики.

Эти библиотеки предоставляют простое API для масштабирования размеров относительно размеров экрана.

Однако я добавил их в список скорее для обозначения самой проблемы скейлинга, чем как обязательную зависимость.

Во многих проектах удобнее написать собственный utility-слой, чтобы не тянуть лишние зависимости.

Пример простого решения:

import { Dimensions } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';

/**
 * Width from design
 */
export const LAYOUT_WIDTH = 375;

/**
 * Height from design
 */
export const LAYOUT_HEIGHT = 812;

/**
 * Height from Dimensions
 */
export const DEVICE_HEIGHT = Dimensions.get('window').height;

/**
 * Width from Dimensions
 */
export const DEVICE_WIDTH = Dimensions.get('window').width;

/**
 * Get scalable width by design
 * @param size number
 * @returns scaled width
 */
export const scaleWidth = (size: number) => {
  return Math.floor((DEVICE_WIDTH / LAYOUT_WIDTH) * size);
};

/**
 * Get scalable height by design
 * @param size number
 * @returns scaled height
 */
export const scaleHeight = (size: number) => {
  return Math.floor((DEVICE_HEIGHT / LAYOUT_HEIGHT) * size);
};

/**
 * Get scalable font size by design
 * @param size pixel
 * @returns scaled fontSize
 */
export const scaleFont = (size: number) => {
  return RFValue(size, LAYOUT_HEIGHT);
};

Плюсы:

Простое API
Небольшой размер библиотек

Минусы:

Часто требуется писать дополнительные обертки
Легко заменить собственным utility-решением.

Больше анимаций

Инструмент: lottie-react-native

Наверное, это моя любимая библиотека из этого списка. Это мост к нативным библиотекам Lottie, которые позволяют проигрывать JSON-анимации, экспортированные из After Effects. С помощью Lottie можно быстро добавить сложные анимации без написания кода анимации вручную.

Источники анимаций:

ваши дизайнеры
открытые библиотеки
marketplace анимаций

Спектр применения крайне широк. Можно добавлять различные анимации для пустого состояния, состояния ошибки или добавить фейковый Launch Screen после системного.Также вы можете добавить экран-заглушку, для экрана который еще находится в разработке.

Иногда Lottie помогает и в более практичных ситуациях. Например, в одном проекте мы показывали ранний демо-билд приложения, в котором был полностью готов только один таб из четырех. Тогда я решил, вместо белых экранов, добавить InProgressScreen c простой lottie-анимацией и заголовком “Этот экран находится в разработке”. Это заняло у меня не больше получаса. Но когда заказчик начал переходить с табы на табу, то был рад увидеть хоть что-то вместо белого экрана. Сразу понятно, что это не приложение сломалось и не отображает верстку, а экраны просто еще разрабатываются.

Плюсы:

Простое использование
Очень выразительный результат
Огромная библиотека готовых анимаций

Минусы:

Сложные анимации могут заметно нагружать слабые устройства
Нужен дизайнер, знакомый с After Effects, либо поиск подходящих анимаций.

В этой статье я хотел не просто перечислить несколько библиотек.

Главная мысль в том, что разработчик тоже может напрямую влиять на пользовательский опыт. Небольшие улучшения вроде тактильного фидбэка, skeleton-экранов, плавных анимаций и корректного масштабирования интерфейса часто требуют минимальных усилий, но заметно повышают качество приложения.

Ни одна из перечисленных библиотек не является обязательной. Что-то можно не использовать вовсе, что-то можно заменить альтернативами, а некоторые решения проще написать самостоятельно

Но если вы хотите быстро «оживить» React Native-приложение, эти инструменты могут стать хорошей отправной точкой.

5 библиотек, которые помогут улучшить UX в вашем React Native-приложении