vercel-react-native-skills

Vercel React Native Skills — справочник практик для разработки производительных приложений на React Native и Expo. Он применяется при создании компонентов, оптимизации списков и прокрутки, реализации анимаций, работе с изображениями и медиа, настройке native modules и шрифтов, а также при организации monorepo с нативными зависимостями. Исходная инструкция не описывает отдельный генератор проекта: её задача — направить ревью или реализацию к конкретным правилам из набора skills. Полный документ и детальные примеры находятся в исходном репозитории, поэтому команда должна открыть нужное правило перед изменением кода. Правила распределены по восьми категориям и имеют разные приоритеты. Самый высокий приоритет у производительности списков: для больших наборов рекомендуется виртуализация через FlashList, мемоизация элементов, стабильные callback-ссылки, отказ от inline style-объектов, вынос дорогой работы за пределы элемента, настройка item types для неоднородных списков и оптимизация изображений внутри списка. Это не один универсальный рецепт: конкретный выбор зависит от структуры экрана и размера данных, а рекомендации нужно сопоставлять с фактическим компонентом и его профилем. Высокий приоритет у анимаций и навигации. Для анимаций исходный quick reference выделяет свойства transform и opacity, вычисляемые значения через useDerivedValue и Gesture.Tap вместо Pressable для tap-жестов. Для навигации предлагается рассматривать native stack и native tabs вместо JS-навигации. Эти пункты описывают направление проверки, а не обещают одинаковое поведение на iOS и Android без проверки конкретной версии Expo, React Native и подключённых модулей. В разделе UI patterns собраны рекомендации использовать expo-image для изображений, Galeria для lightbox-галерей, Pressable вместо TouchableOpacity, корректно обрабатывать safe area в ScrollView и contentInset для заголовков, предпочитать native context menus и native modals, измерять представления через onLayout вместо measure(), а стили организовывать через StyleSheet.create или Nativewind. Рядом находятся правила состояния и рендера: минимизировать подписки на состояние, использовать dispatcher-подход для callback, показывать fallback на первом рендере, учитывать деструктуризацию функций React Compiler, оборачивать текст в Text и не строить условный UI на неявном falsy &&. Оставшиеся группы покрывают monorepo и конфигурацию. Нативные зависимости предлагается держать в пакете приложения, версии общих зависимостей — синхронизировать между пакетами, конфигурацию шрифтов оформлять через config plugins, а Intl создавать вне рендера. Имена правил имеют префиксы list-performance-, animation-, navigation-, ui-, react-state-, rendering-, monorepo-, fonts- и imports-. Такой индекс позволяет сначала выбрать узкую проверку, затем прочитать отдельный markdown-файл с объяснением, неправильным и правильным примером. Практический сценарий использования выглядит так: определить, относится ли задача к React Native или Expo, выбрать категорию и приоритет, открыть конкретное правило, проверить текущий компонент, список, жест или конфигурацию и только потом менять код. Карточка описывает рекомендации Vercel по практикам, но не заменяет тестирование на целевых устройствах, профилирование, проверку доступности или совместимости native API. При конфликте с фактической архитектурой проекта нужно сохранить проверяемое поведение приложения и отдельно проверить версию исходного правила.