15 промтов для React Native: компоненты, навигация, API

Введение

React Native остаётся одним из самых востребованных фреймворков для кросс-платформенной мобильной разработки. По данным опроса JetBrains 2025 года, более 38% мобильных разработчиков используют RN в своих проектах. Чтобы не тратить время на шаблонный код и быстро получать рабочие решения, я составил подборку из 15 промтов, которые ежедневно применяю в своей работе. Они покрывают создание UI-компонентов, настройку навигации, интеграцию с API и типовые задачи отладки. Каждый промт проверен на практике — вы можете скопировать его и адаптировать под свой проект.

1. Генерация кастомной кнопки с анимацией нажатия

Задача: Создать переиспользуемый компонент кнопки с эффектом масштабирования при Touch.

Промт:

Напиши React Native компонент AnimatedButton на TypeScript. Используй Animated и Pressable. Кнопка должна плавно уменьшаться до 0.95 при нажатии и возвращаться обратно. Прими props: title, onPress, style?. Добавь поддержку disabled-состояния с opacity 0.5.

Пример реализации:

import React, { useRef } from 'react';
import { Pressable, Animated, Text, StyleSheet } from 'react-native';

interface Props {
  title: string;
  onPress: () => void;
  style?: object;
  disabled?: boolean;
}

const AnimatedButton: React.FC<Props> = ({ title, onPress, style, disabled }) => {
  const scale = useRef(new Animated.Value(1)).current;

  const onPressIn = () => {
    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true }).start();
  };

  const onPressOut = () => {
    Animated.spring(scale, { toValue: 1, useNativeDriver: true }).start();
  };

  return (
    <Pressable onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} disabled={disabled}>
      <Animated.View style={[styles.button, style, { transform: [{ scale }] }, disabled && styles.disabled]}>
        <Text style={styles.text}>{title}</Text>
      </Animated.View>
    </Pressable>
  );
};

Почему это работает: Использование Animated.spring даёт естественную физику. Компонент легко переиспользуется во всём приложении.

2. FlatList с ленивой подгрузкой данных (infinite scroll)

Задача: Реализовать бесконечный список с подгрузкой при достижении конца.

Промт:

Напиши React Native компонент InfiniteList, который использует FlatList и onEndReached. При достижении конца списка вызывай loadMore(). Пока данные загружаются, показывай ActivityIndicator в футере. Прими data, renderItem, loadMore, isLoading. Добавь обработку пустого состояния и ошибок.

Фрагмент кода:

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}
  ListFooterComponent={isLoading ? <ActivityIndicator /> : null}
/>

Совет: Установи onEndReachedThreshold = 0.5, чтобы подгрузка начиналась за полэкрана до конца.

3. React Navigation — подключение Stack и Tab навигаторов

Задача: Быстро настроить навигацию с нижними вкладками и стеком экранов внутри.

Промт:

Создай навигацию для RN приложения с React Navigation. Используй @react-navigation/native, @react-navigation/bottom-tabs, @react-navigation/native-stack. Сделай два таба: Home и Profile. В Home — стек с экранами HomeScreen и DetailsScreen. Кастомные иконки для табов через tabBarIcon. Не забудь обернуть в NavigationContainer.

Пример структуры:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Tab = createBottomTabNavigator();
const HomeStack = createNativeStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}
// ... в App.tsx <Tab.Navigator>...</Tab.Navigator>

4. Передача параметров между экранами

Задача: Передать данные из списка на детальный экран.

Промт:

Покажи, как передать параметр itemId из HomeScreen в DetailsScreen через navigation.navigate. На DetailsScreen получи параметры через route.params. Определи типы для параметров с помощью TypeScript (например, type RootStackParamList = { Details: { itemId: string } }).

5. Запрос к REST API с помощью axios

Задача: Получить данные с сервера и отобразить их.

Промт:

Напиши хук useFetch<T>(url: string), который возвращает { data, loading, error }. Используй axios. Выполняй запрос в useEffect с отменой через AbortController. Добавь типизацию дженериком. Обработай ошибки сети и парсинга.

6. Обработка ошибок и повторный запрос

Задача: При ошибке сети показать кнопку «Повторить».

Промт:

Дополни хук useFetch из предыдущего промта: добавь функцию retry(), которая повторяет запрос. При ошибке в компоненте рендери блок с текстом ошибки и кнопкой «Повторить».

7. Скелетон-загрузка для списка

Задача: Показать placeholder, пока данные загружаются.

Промт:

Создай компонент SkeletonCard, который имитирует карточку с мерцающим серым фоном (shimmer effect). Используй Animated и linear-gradient (через expo-linear-gradient). Покажи, как использовать его в FlatList при loading === true.

8. Стилизация через StyleSheet и тему

Задача: Создать единую тему цветов и шрифтов.

Промт:

Создай объект theme с цветами (primary, background, text) и размером шрифта. Экспортируй его. Напиши хук useTheme(), который возвращает тему. Покажи, как использовать StyleSheet.create() с динамическими значениями из темы.

9. Компонент модального окна

Задача: Универсальный модальный компонент с анимацией.

Промт:

React Native компонент Modal с пропсами visible, onClose, children. Используй Modal из react-native. Добавь прозрачный фон, закрытие по нажатию на оверлей. Анимация появления через Animated.timing (fade + scale).

10. Работа с формами — контролируемые input

Задача: Форма логина с валидацией.

Промт:

Компонент LoginForm с TextInput для email и password. Используй useState для значений. Валидация: email — содержит @, password — минимум 6 символов. Показывай сообщение об ошибке под каждым полем. При отправке вызывай onSubmit({ email, password }).

11. Хранилище состояния с AsyncStorage

Задача: Сохранить токен авторизации локально.

Промт:

Напиши утилиту storage с методами getToken(), setToken(token), removeToken(). Используй @react-native-async-storage/async-storage. Оберни в Promise. Добавь обработку ошибок.

12. Кастомный хук для управления клавиатурой

Задача: Скрывать клавиатуру по тапу вне поля.

Промт:

Напиши компонент DismissKeyboardHOC, который оборачивает дочерние элементы в TouchableWithoutFeedback и вызывает Keyboard.dismiss(). Покажи, как использовать в корне экрана.

13. Сборка release-версии для Android/iOS

Задача: Быстрая конфигурация production-сборки.

Промт:

Напиши инструкцию в виде промта: "Объясни шаги для сборки React Native приложения в режиме release для Android (генерация ключа, настройка gradle) и для iOS (схема Release, Archive). Добавь проверку ProGuard и bitcode."

14. Работа с геолокацией

Задача: Получить текущее местоположение пользователя.

Промт:

Напиши хук useLocation, который использует navigator.geolocation (через @react-native-community/geolocation). Возвращает { latitude, longitude, error }. Запрашивай разрешения через PermissionsAndroid для Android. Покажи пример отображения координат.

15. Оптимизация FlatList — getItemLayout

Задача: Ускорить FlatList с однотипными элементами фиксированной высоты.

Промт:

Покажи, как добавить getItemLayout для FlatList с элементами высотой 80px. Объясни, почему это улучшает производительность (скролл без пересчёта высоты). Приведи пример расчёта: (data, index) => ({ length: 80, offset: 80 * index, index }).

Заключение

Эти 15 промтов покрывают 80% типовых задач, с которыми я сталкиваюсь каждый день. Главное — не копируйте код слепо: адаптируйте под свой стек, добавляйте обработку граничных случаев и следите за версиями зависимостей. AI — отличный помощник, но финальное решение всегда за вами. Сохраните эту подборку в закладки, и вы сэкономите часы на рутине. А если хотите прокачать скиллы осознанно — рекомендую официальную документацию React Native и исходники популярных библиотек на GitHub.

Удачной разработки! 🚀