В 2026 году React Native остаётся одним из самых востребованных фреймворков для кроссплатформенной мобильной разработки. Согласно опросу Stack Overflow за 2025 год, его используют 42% профессиональных мобильных разработчиков, а по данным JetBrains, RN входит в топ-5 фреймворков по скорости роста вакансий. Однако даже опытные разработчики тратят до 40% времени на написание шаблонного кода для UI, настройку навигации и интеграцию API. Именно здесь на помощь приходят промты — готовые инструкции для AI-ассистентов, которые генерируют код за секунды.
Мы собрали 7 практичных промтов, которые покрывают три ключевые области React Native: создание компонентов, настройку навигации и работу с API. Каждый промт сопровождается пояснением и примером использования. Просто копируйте, вставляйте в ChatGPT (или любой AI-ассистент) и адаптируйте под свой проект.
Как работают промты для React Native
Промт — это структурированный запрос к AI, который включает:
- контекст (версия React Native, используемые библиотеки);
- задачу (что нужно сгенерировать);
- требования (стиль, типизация, обработка ошибок);
- пример вывода (ожидаемый формат кода).
Все промты ниже написаны для React Native 0.76+ и TypeScript. Если вы используете JavaScript, просто уберите типы.
Промты для компонентов UI
1. Генерация кастомной кнопки с анимацией
Для чего: Создание переиспользуемого компонента кнопки с состояниями (normal, pressed, disabled) и анимацией нажатия.
Промт:
Создай компонент React Native (TypeScript) для кастомной кнопки с анимацией. Требования:
- пропсы: title (string), onPress (function), disabled (boolean), variant ('primary' | 'secondary')
- используй Animated API для эффекта масштабирования при нажатии (scale: 0.96)
- поддерживает тёмную тему через useColorScheme
- стили через StyleSheet, без сторонних UI-библиотек
- добавь комментарии к ключевым строкам
Пример использования:
<CustomButton
title="Отправить"
onPress={() => console.log('Pressed')}
variant="primary"
/>
2. Создание карточки товара с динамическим контентом
Для чего: Шаблон для карточки товара в e-commerce приложении — изображение, название, цена, рейтинг.
Промт:
Сгенерируй компонент Card для React Native (TypeScript). Пропсы:
- imageUrl (string)
- title (string)
- price (number)
- rating (number, 1-5)
Компонент должен:
- показывать изображение с fallback (серый placeholder, если imageUrl пустой)
- отображать рейтинг в виде звёздочек (символы ★ и ☆)
- форматировать цену с двумя знаками после запятой и символом валюты ($)
- поддерживать onPress для нажатия на всю карточку
- использовать FlatList для рендера списка таких карточек (пример)
Промты для навигации
3. Настройка Tab Navigator с кастомными иконками
Для чего: Быстрая конфигурация нижней навигации с использованием @react-navigation/bottom-tabs и иконок из react-native-vector-icons.
Промт:
Напиши конфигурацию Bottom Tab Navigator для React Native (TypeScript) с тремя вкладками: Home, Search, Profile. Требования:
- используй @react-navigation/bottom-tabs версии 7.x
- иконки — из библиотеки MaterialCommunityIcons (react-native-vector-icons)
- кастомный стиль активной/неактивной вкладки (цвет, размер иконки)
- для каждой вкладки создай отдельный стековый навигатор (Stack.Navigator) с одним экраном
- обработай случай, когда иконка не найдена — покажи дефолтную иконку
- добавь badge на вкладку Profile (отображать количество уведомлений, пропс badgeCount)
4. Передача параметров между экранами с типизацией
Для чего: Безопасная передача данных через navigation.navigate с полной поддержкой TypeScript.
Промт:
Создай типизированную навигацию для React Native (TypeScript). Используй @react-navigation/native 7.x. Требуется:
- определить RootStackParamList с типами для всех экранов
- экран HomeScreen принимает параметр { userId?: string }
- экран DetailsScreen принимает { itemId: number; title: string }
- экран SettingsScreen не принимает параметров
- напиши пример использования useNavigation и useRoute с корректными типами
- добавь кастомный хук useAppNavigation, который возвращает типизированный navigation
Промты для работы с API
5. Кастомный хук для fetch-запросов с обработкой ошибок
Для чего: Универсальный хук для GET-запросов с состояниями loading, error, data и автоматической отменой запроса при размонтировании компонента.
Промт:
Напиши кастомный хук useFetch для React Native (TypeScript). Сигнатура:
- принимает url (string) и опциональные options (RequestInit)
- возвращает { data, loading, error, refetch }
Требования:
- используй AbortController для отмены запроса при unmount
- обработай сетевые ошибки (например, отсутствие интернета) и ошибки HTTP (status >= 400)
- data имеет generic-тип <T>
- добавь таймаут 10 секунд через setTimeout + abort
- пример использования: получение списка постов с JSONPlaceholder
Пример использования:
const { data: posts, loading } = useFetch<Post[]>('https://jsonplaceholder.typicode.com/posts');
6. Интеграция с REST API с авторизацией (Bearer token)
Для чего: Скрипт для выполнения авторизованных запросов с автоматическим обновлением токена.
Промт:
Создай сервис для работы с REST API в React Native (TypeScript). Поддерживает:
- GET, POST, PUT, DELETE запросы
- автоматическое добавление Bearer токена из AsyncStorage
- если токен истёк (код 401) — попытка обновить токен через refreshToken endpoint, затем повторный запрос
- логирование запросов в консоль (method, url, status)
- обработку ошибок с кастомным классом ApiError (code, message, details)
- используй fetch, без axios
- пример вызова: api.get('/users', { params: { page: 1 } })
7. Генерация типов из JSON-ответа API
Для чего: Автоматическое создание TypeScript-интерфейсов на основе примера ответа сервера.
Промт:
На основе следующего JSON-ответа от API /api/products сгенерируй TypeScript-интерфейсы. Включи вложенные объекты, массивы и опциональные поля (если поле может быть null, сделай его необязательным с ?).
JSON:
{
"id": 1,
"name": "iPhone 15",
"price": 999.99,
"inStock": true,
"category": {
"id": 5,
"name": "Electronics"
},
"variants": [
{"color": "Black", "storage": "128GB"},
{"color": "White", "storage": "256GB"}
],
"reviews": []
}
Выведи готовые интерфейсы Product, Category, Variant, Review (пустой — с опциональными полями).
Как адаптировать промты под свой проект
Все промты выше — это шаблоны. Чтобы получить максимально релевантный код, добавьте в начало промта контекст вашего проекта:
- текущие версии библиотек (например, "React Native 0.76, React 19");
- используемые UI-фреймворки (NativeWind, Restyle и т.д.);
- архитектуру (например, "feature-first структура папок");
- предпочтения ("используй const вместо function", "добавь JSDoc-комментарии").
Например, универсальный промт для компонента может выглядеть так:
"Контекст: React Native 0.76, TypeScript 5.5, NativeWind 4.0. Создай компонент Card..."
Заключение
Промты — это не замена пониманию React Native, а мощный ускоритель рутинных задач. Используйте их для генерации шаблонного кода, типов и конфигураций, но всегда проверяйте сгенерированный код на соответствие вашим требованиям. С описанными выше семью промтами вы сможете сократить время на написание UI-компонентов на 30-50%, настроить навигацию за 5 минут и избежать типичных ошибок при работе с API.
Экспериментируйте, адаптируйте промты под свой стек и делитесь результатами в комментариях. Если у вас есть свои любимые промты для React Native — пишите, мы дополним подборку!
Комментарии