React Native — это фреймворк, который позволяет создавать мобильные приложения на JavaScript и TypeScript, используя один кодовую базу для iOS и Android. Согласно официальной документации (reactnative.dev), его используют такие компании, как Meta, Shopify и Wix, что подтверждает надёжность технологии. Однако даже опытные разработчики тратят часы на рутинные задачи: написание компонентов, настройку навигации или интеграцию с REST API. Именно здесь на помощь приходят промты для AI-ассистентов — они автоматизируют шаблонную работу, ускоряют разработку и помогают избежать типичных ошибок.
В этой подборке я собрал 14 проверенных промтов, разделённых по трём ключевым категориям: компоненты UI, навигация и работа с API. Каждый промт можно скопировать и вставить в ChatGPT, Claude или другую AI-модель, адаптировав под свой проект. Помните, что AI не идеален: всегда проверяйте сгенерированный код, особенно если речь идёт о безопасности (например, обработке токенов).
Компоненты UI
1. Создание переиспользуемого компонента с пропсами
Для чего: быстро сгенерировать типовой компонент (кнопка, карточка, инпут) с TypeScript-типами и стилями.
Промт:
Создай компонент Button для React Native на TypeScript. Требования: принимает label, onPress, variant (primary/secondary), disabled. Используй Pressable и StyleSheet. Покажи пример использования.
Пример использования: вы добавили в промт свои требования — и получили готовый файл Button.tsx с тремя вариантами стилей. Это экономит 15–20 минут на каждой кнопке.
2. Тёмная и светлая тема с useColorScheme
Для чего: настройка тёмной темы без сторонних библиотек.
Промт:
Напиши хук useTheme для React Native. Он должен использовать useColorScheme, возвращать объект theme с цветами фона, текста и акцента. Добавь поддержку тёмной темы через Appearance.setColorScheme.
Совет: попросите AI сгенерировать не только хук, но и пример компонента, который адаптируется под тему. Это особенно полезно при переходе на iOS 13+ и Android 10+, где системная тёмная тема уже стала стандартом.
3. Кастомный модальное окно с анимацией
Для чего: модальные окна — извечная боль. Промт генерирует анимированный Modal с затемнённым фоном.
Промт:
Сделай компонент CustomModal на React Native: оверлей с полупрозрачным фоном, центрированная карточка, анимация появления (fade и slide up), закрытие по клику на оверлей. Используй Animated API.
Почему это работает: Animated API отнимает много времени, а AI-модель уже видела десятки реализаций. Вы получаете работающий код без «плавающих» багов.
4. Список сообщений (чат) с FlatList
Для чего: для чата или ленты новостей нужна оптимизация списка.
Промт:
Создай компонент MessageList для React Native. Используй FlatList, поддержку разной высоты элементов (сообщения с картинками), а также автоскролл вниз при новом сообщении. Добавь пустое состояние.
Результат: вы получаете производительный список, который не тормозит даже при 1000 сообщениях, потому что FlatList переиспользует элементы.
Навигация
5. Базовая настройка React Navigation и типизация
Для чего: навигация — это скелет приложения. Промт создаёт стек навигации с TypeScript.
Промт:
Настройте React Navigation (пакет @react-navigation/native) для приложения React Native. Сделай RootStack созданный из createNativeStackNavigator, добавь два экрана: Home и Details. Покажи типизацию параметров для навигации, чтобы использовать navigation.navigate('Details', { id: 1 }) типизированно.
Почему это важно: типизация навигации — частая причина багов. AI-модель сразу укажет, как правильно объявить типы.
6. Таб-навигатор с бейджами (иконками уведомлений)
Для чего: нижние табы — стандарт для мобильных приложений.
Промт:
Создай BottomTabNavigator на @react-navigation/bottom-tabs. Добавь три вкладки: Home, Search, Profile. Используй иконки из @expo/vector-icons (Ionicons). Покажи, как добавить бейдж с количеством уведомлений на вкладку Home с помощью tabBarBadge.
Экспертный совет: укажите в промте, что нужно использовать tabBarActiveTintColor и tabBarInactiveTintColor — так навигация будет соответствовать гайдлайнам iOS/Android.
7. Передача параметров между экранами с безопасностью типов
Для чего: часто разработчики забывают деструктуризировать параметры. Промт решает это.
Промт:
В React Navigation передай параметр userId со экрана Home на экран Profile. Используй route.params через useRoute и типизируй его. Добавь обработку случая, когда параметр undefined, чтобы не было краша.
Пример: AI сгенерирует следующий код:
const { userId } = route.params ?? {};
if (!userId) {
// показать заглушку или редирект
}
8. Диплинки (deep links) в React Navigation
Для чего: чтобы открывать приложение по ссылке из email или push-уведомления.
Промт:
Настрой deep linking в React Navigation для linking-конфигурации. Дай пример: префикс 'myapp://', маппинг '/profile/:id' на экран Profile, и как обработать initialRouteName.
Этот промт пригодится, если вы делаете маркетинговые рассылки или реферальные программы.
Работа с API
9. Хук useFetch для GET-запросов с состоянием
Для чего: данные с сервера — основа любого приложения. Промт создаёт хук, который автоматически управляет состоянии загрузки, ошибки и данных.
Промт:
Напиши хук useFetch<T> для React Native на TypeScript. Он принимает url и options, возвращает { data, loading, error, refetch }. Используй fetch API, отменяй запрос при размонтировании с помощью AbortController. Добавь обработку ошибок с try/catch и типизацию ответа.
Как использовать:
const { data, loading, error } = useFetch<User>('https://api.example.com/user');
10. Интеграция с REST API и обработка ошибок
Для чего: не просто запрос, а полный цикл с токеном, таймаутом и повторными попытками.
Промт:
Создай файл api.ts с классом ApiClient. Он должен: принимать baseUrl, интерцепторы для добавления Authorization Bearer токена, методы get, post, put, delete, таймаут через AbortSignal, и повторный запрос один раз при 401 (refresh токена). Покажи пример использования на реальном эндпоинте /users.
Экспертное замечание: этот промт даст клиент, который готов к бою. Но не забудьте заменить refresh на реальную логику — AI не знает ваш бэкенд.
11. Загрузка файлов (upload) с прогрессом
Для чего: отправка фото или документов на сервер — частая задача.
Промт:
Напиши функцию uploadFile в React Native, используя fetch, FormData, и XMLHttpRequest для отслеживания прогресса. Покажи, как отправить изображение из react-native-image-picker, и как вывести прогресс в UI с помощью ProgressBarAndroid или компонента из react-native-webview? (лучше использовать свой).
Важно: XMLHttpRequest даёт событие upload.onprogress, чего нет в fetch. Уточните это в промте, чтобы получить рабочий код.
12. Кэширование ответов (React Query)
Для чего: библиотека React Query (теперь TanStack Query) — стандарт для синхронизации с сервером.
Промт:
Создай пример использования @tanstack/react-query в React Native. Настрой QueryClient, провайдер в App.tsx, и хук useQuery для получения списка постов из https://jsonplaceholder.typicode.com/posts. Добавь mutation для создания нового поста и использование queryClient.invalidateQueries после мутации.
Почему это полезно: вы получаете кэш, ретраи и инвалидацию — то, что вручную пишется за 30 минут.
13. Обработка пагинации с Infinite Query
Для чего: бесконечная лента с подгрузкой при скролле.
Промт:
Реализуй бесконечную подгрузку списка товаров с помощью useInfiniteQuery из @tanstack/react-query. Включи параметры pageParam и getNextPageParam для API с пагинацией через '?page=1'. В компоненте используй FlatList onEndReached. Покажи, как объединить страницы через data.pages.flatMap.
Этот промт идеален для интернет-магазинов и соцсетей.
14. Сокеты (WebSocket) для реального времени
Для чего: чаты, уведомления в реальном времени.
Промт:
Напиши хук useWebSocket для React Native. Он должен подключаться к wss://example.com/socket, обрабатывать сообщения как JSON, автоматически переподключаться при обрыве связи и поддерживать отправку сообщений через send(). Добавь типизацию сообщений и статуса подключения.
Примечание: Реальные проекты используют библиотеку socket.io-client, поэтому укажите это в промте, если ваш сервер на Socket.IO.
Заключение
Эти 14 промтов покроют 80% ежедневных задач React Native-разработчика. Скопируйте нужный, адаптируйте под свой проект и не забывайте проверять код, особенно краевые случаи — AI не знает ваш стек на 100%. Со временем вы научитесь составлять свои промты, добавляя контекст из документации (reactnative.dev, reactnavigation.org) и примеры реальных API.
Хотите больше готовых промтов? Подпишитесь на блог Asibiont — мы регулярно публикуем практические руководства по мобильной разработке, AI-инструментам и не только!
Комментарии