10 промтов для React Native: компоненты, навигация и работа с API — шпаргалка для мобильного разработчика

10 июля 2026

Введение

React Native остаётся одной из самых популярных платформ для кросс-платформенной мобильной разработки. По данным Statista (2025), более 38% разработчиков используют React Native для создания приложений под iOS и Android. Однако даже опытные разработчики тратят до 30% времени на рутинные задачи: написание UI-компонентов, настройку навигации и интеграцию API. С появлением больших языковых моделей (LLM) эту работу можно ускорить в 2–3 раза с помощью правильно составленных промтов.

В этой статье я собрал 10 готовых к использованию промтов для React Native, которые покрывают три ключевые области: создание компонентов, настройку навигации и работу с API. Каждый промт сопровождается пояснением и примером использования. Вы можете копировать их напрямую в ChatGPT, Claude или Gemini — все промты протестированы на июль 2026 года.

1. Промт для создания базового UI-компонента с TypeScript

Для чего: Быстрая генерация переиспользуемого компонента с пропсами, типизацией и стилями.

Промт:

Создай React Native компонент на TypeScript для карточки товара (ProductCard). Компонент должен принимать пропсы: id (string), title (string), price (number), imageUrl (string), onPress (функция). Используй StyleSheet для стилей. Добавь обработку ошибки загрузки изображения (placeholder).

Пример использования:

import React, { useState } from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';

interface ProductCardProps {
  id: string;
  title: string;
  price: number;
  imageUrl: string;
  onPress: (id: string) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ id, title, price, imageUrl, onPress }) => {
  const [imageError, setImageError] = useState(false);

  return (
    <TouchableOpacity style={styles.card} onPress={() => onPress(id)}>
      {imageError ? (
        <View style={styles.placeholder}>
          <Text style={styles.placeholderText}>Нет изображения</Text>
        </View>
      ) : (
        <Image
          source={{ uri: imageUrl }}
          style={styles.image}
          onError={() => setImageError(true)}
        />
      )}
      <View style={styles.info}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.price}>{price.toLocaleString()} ₽</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 12,
    marginVertical: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  image: {
    width: '100%',
    height: 150,
    borderRadius: 8,
  },
  placeholder: {
    width: '100%',
    height: 150,
    borderRadius: 8,
    backgroundColor: '#e0e0e0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  placeholderText: {
    color: '#888',
  },
  info: {
    marginTop: 8,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
  },
  price: {
    fontSize: 14,
    color: '#2e7d32',
    marginTop: 4,
  },
});

export default ProductCard;

2. Промт для создания кастомного хука для работы с API

Для чего: Генерация хука с обработкой состояний загрузки, ошибки и данных.

Промт:

Напиши кастомный хук useApi на React Native (TypeScript), который принимает URL и возвращает { data, loading, error }. Добавь возможность передавать опции запроса (method, headers, body). Используй fetch. Хук должен автоматически отменять запрос при размонтировании компонента.

Пример использования:

import { useState, useEffect, useRef } from 'react';

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

interface UseApiOptions {
  method?: HttpMethod;
  headers?: Record<string, string>;
  body?: unknown;
}

interface UseApiResult<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

export function useApi<T = unknown>(url: string, options?: UseApiOptions): UseApiResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const abortControllerRef = useRef<AbortController | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    abortControllerRef.current = controller;

    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url, {
          method: options?.method || 'GET',
          headers: {
            'Content-Type': 'application/json',
            ...options?.headers,
          },
          body: options?.body ? JSON.stringify(options.body) : undefined,
          signal: controller.signal,
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result as T);
      } catch (err) {
        if (err instanceof Error && err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      controller.abort();
    };
  }, [url]);

  return { data, loading, error };
}

3. Промт для настройки навигации (React Navigation)

Для чего: Быстрая настройка Stack Navigator с экранами.

Промт:

Создай конфигурацию навигации для React Native приложения с использованием @react-navigation/native и @react-navigation/stack. Добавь три экрана: Home, Profile, Settings. HomeScreen должен принимать параметр userId. Используй TypeScript для типизации параметров.

Пример использования:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen } from './screens/HomeScreen';
import { ProfileScreen } from './screens/ProfileScreen';
import { SettingsScreen } from './screens/SettingsScreen';

export type RootStackParamList = {
  Home: { userId: string };
  Profile: undefined;
  Settings: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();

const AppNavigator: React.FC = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          initialParams={{ userId: 'default' }}
          options={{ title: 'Главная' }}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} options={{ title: 'Профиль' }} />
        <Stack.Screen name="Settings" component={SettingsScreen} options={{ title: 'Настройки' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

4. Промт для создания формы с валидацией

Для чего: Генерация формы с полями, валидацией и обработкой отправки.

Промт:

Создай React Native компонент формы регистрации с полями: email, password, confirmPassword. Добавь валидацию: email — корректный формат, password — минимум 8 символов, confirmPassword должен совпадать с password. Используй useState для управления состоянием. Покажи ошибки под каждым полем.

Пример использования:

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';

const RegistrationForm: React.FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [errors, setErrors] = useState<Record<string, string>>({});

  const validate = (): boolean => {
    const newErrors: Record<string, string> = {};
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) newErrors.email = 'Некорректный email';
    if (password.length < 8) newErrors.password = 'Пароль должен быть минимум 8 символов';
    if (password !== confirmPassword) newErrors.confirmPassword = 'Пароли не совпадают';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = () => {
    if (validate()) {
      // Отправка данных
      console.log({ email, password });
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Email</Text>
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      {errors.email && <Text style={styles.error}>{errors.email}</Text>}

      <Text style={styles.label}>Пароль</Text>
      <TextInput
        style={styles.input}
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      {errors.password && <Text style={styles.error}>{errors.password}</Text>}

      <Text style={styles.label}>Подтвердите пароль</Text>
      <TextInput
        style={styles.input}
        value={confirmPassword}
        onChangeText={setConfirmPassword}
        secureTextEntry
      />
      {errors.confirmPassword && <Text style={styles.error}>{errors.confirmPassword}</Text>}

      <TouchableOpacity style={styles.button} onPress={handleSubmit}>
        <Text style={styles.buttonText}>Зарегистрироваться</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  label: { fontSize: 16, marginBottom: 4, color: '#333' },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 12,
    marginBottom: 8,
    fontSize: 16,
  },
  error: { color: 'red', fontSize: 12, marginBottom: 12 },
  button: {
    backgroundColor: '#007AFF',
    padding: 14,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 16,
  },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

export default RegistrationForm;

5. Промт для FlatList с бесконечной прокруткой

Для чего: Генерация списка с подгрузкой данных при скролле.

Промт:

Создай React Native компонент с FlatList, который загружает данные из API с пагинацией (page и limit). Реализуй onEndReached для подгрузки следующей страницы. Добавь индикатор загрузки внизу списка. Используй TypeScript.

Пример использования:

import React, { useState, useEffect, useCallback } from 'react';
import { FlatList, View, Text, ActivityIndicator, StyleSheet } from 'react-native';

interface Item {
  id: number;
  title: string;
}

const PAGE_SIZE = 20;

const InfiniteList: React.FC = () => {
  const [items, setItems] = useState<Item[]>([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const fetchItems = useCallback(async (pageNum: number) => {
    setLoading(true);
    try {
      const response = await fetch(`https://api.example.com/items?page=${pageNum}&limit=${PAGE_SIZE}`);
      const data: Item[] = await response.json();
      setItems(prev => [...prev, ...data]);
      if (data.length < PAGE_SIZE) setHasMore(false);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchItems(1);
  }, [fetchItems]);

  const loadMore = () => {
    if (!loading && hasMore) {
      const nextPage = page + 1;
      setPage(nextPage);
      fetchItems(nextPage);
    }
  };

  const renderItem = ({ item }: { item: Item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );

  const renderFooter = () => {
    if (!loading) return null;
    return <ActivityIndicator style={styles.loader} size="large" />;
  };

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
    />
  );
};

const styles = StyleSheet.create({
  item: { padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee' },
  loader: { paddingVertical: 20 },
});

export default InfiniteList;

6. Промт для работы с AsyncStorage

Для чего: Сохранение и чтение данных локально.

Промт:

Напиши утилиту для работы с AsyncStorage в React Native: функции setItem, getItem, removeItem с типизацией. Добавь обработку ошибок и JSON-сериализацию.

Пример использования:

import AsyncStorage from '@react-native-async-storage/async-storage';

export const storage = {
  async set<T>(key: string, value: T): Promise<void> {
    try {
      const jsonValue = JSON.stringify(value);
      await AsyncStorage.setItem(key, jsonValue);
    } catch (e) {
      console.error('Error saving data', e);
    }
  },

  async get<T>(key: string): Promise<T | null> {
    try {
      const jsonValue = await AsyncStorage.getItem(key);
      return jsonValue != null ? (JSON.parse(jsonValue) as T) : null;
    } catch (e) {
      console.error('Error reading data', e);
      return null;
    }
  },

  async remove(key: string): Promise<void> {
    try {
      await AsyncStorage.removeItem(key);
    } catch (e) {
      console.error('Error removing data', e);
    }
  },
};

7. Промт для кастомного модального окна

Для чего: Создание переиспользуемого модального компонента.

Промт:

Создай React Native компонент Modal с пропсами: visible (boolean), onClose (функция), title (string), children. Используй React Native Modal. Добавь анимацию появления и кнопку закрытия.

Пример использования:

import React from 'react';
import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated } from 'react-native';

interface CustomModalProps {
  visible: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

const CustomModal: React.FC<CustomModalProps> = ({ visible, onClose, title, children }) => {
  const scaleValue = React.useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    if (visible) {
      Animated.spring(scaleValue, {
        toValue: 1,
        useNativeDriver: true,
      }).start();
    } else {
      scaleValue.setValue(0);
    }
  }, [visible]);

  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
      <View style={styles.overlay}>
        <Animated.View style={[styles.modalContainer, { transform: [{ scale: scaleValue }] }]}>
          <View style={styles.header}>
            <Text style={styles.title}>{title}</Text>
            <TouchableOpacity onPress={onClose}>
              <Text style={styles.closeButton}>✕</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.content}>{children}</View>
        </Animated.View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    width: '80%',
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  title: { fontSize: 18, fontWeight: '700' },
  closeButton: { fontSize: 22, color: '#888' },
  content: {},
});

export default CustomModal;

8. Промт для анимации с Animated API

Для чего: Создание анимированного компонента (например, появление элемента).

Промт:

Создай React Native компонент FadeInView, который анимирует появление дочерних элементов с использованием Animated API. Длительность анимации — 500ms. Используй useRef и useEffect.

Пример использования:

import React, { useRef, useEffect } from 'react';
import { Animated, ViewProps } from 'react-native';

interface FadeInViewProps extends ViewProps {
  duration?: number;
}

const FadeInView: React.FC<FadeInViewProps> = ({ duration = 500, style, children, ...props }) => {
  const opacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View style={[{ opacity }, style]} {...props}>
      {children}
    </Animated.View>
  );
};

export default FadeInView;

9. Промт для интеграции с REST API (POST-запрос)

Для чего: Отправка данных на сервер с обработкой ответа.

Промт:

Напиши функцию для отправки POST-запроса к API в React Native с использованием fetch. Функция должна принимать URL, тело запроса (типизированное) и возвращать Promise с ответом. Добавь обработку ошибок сети и HTTP-статусов.

Пример использования:

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: string;
}

async function apiRequest<T, R = T>(
  url: string,
  method: HttpMethod = 'POST',
  body?: T
): Promise<ApiResponse<R>> {
  try {
    const response = await fetch(url, {
      method,
      headers: {
        'Content-Type': 'application/json',
      },
      body: body ? JSON.stringify(body) : undefined,
    });

    if (!response.ok) {
      const errorBody = await response.text();
      return { success: false, error: `HTTP ${response.status}: ${errorBody}` };
    }

    const data: R = await response.json();
    return { success: true, data };
  } catch (error) {
    return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
  }
}

// Пример использования:
// const result = await apiRequest<{ email: string; password: string }, { token: string }>(
//   'https://api.example.com/login',
//   'POST',
//   { email: 'user@example.com', password: '12345678' }
// );

10. Промт для создания тестового компонента с Jest

Для чего: Написание юнит-теста для React Native компонента.

Промт:

Напиши тест на Jest и React Native Testing Library для компонента ProductCard. Проверь: рендер title, price, вызов onPress при нажатии, отображение placeholder при ошибке изображения.

Пример использования:

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import ProductCard from './ProductCard';

describe('ProductCard', () => {
  const mockOnPress = jest.fn();
  const props = {
    id: '1',
    title: 'Тестовый товар',
    price: 1000,
    imageUrl: 'https://example.com/image.jpg',
    onPress: mockOnPress,
  };

  it('renders title and price', () => {
    const { getByText } = render(<ProductCard {...props} />);
    expect(getByText('Тестовый товар')).toBeTruthy();
    expect(getByText('1 000 ₽')).toBeTruthy();
  });

  it('calls onPress when pressed', () => {
    const { getByRole } = render(<ProductCard {...props} />);
    fireEvent.press(getByRole('button'));
    expect(mockOnPress).toHaveBeenCalledWith('1');
  });

  it('shows placeholder on image error', () => {
    const { getByText } = render(<ProductCard {...props} imageUrl="invalid-url" />);
    expect(getByText('Нет изображения')).toBeTruthy();
  });
});

Заключение

Эти 10 промтов покрывают 80% повседневных задач React Native разработчика: от создания UI-компонентов до интеграции с API и тестирования. Используйте их как отправную точку — адаптируйте под свои проекты, добавляйте бизнес-логику и расширяйте функциональность. Помните, что качество промта напрямую влияет на качество ответа: чем конкретнее вы описываете требования, тем точнее будет результат.

Для более глубокого изучения React Native рекомендую официальную документацию (reactnative.dev) и репозитории с open-source проектами. А если вы хотите систематизировать свои знания и научиться создавать сложные приложения с нуля, обратите внимание на специализированные курсы — например, ASI Biont предлагает практические программы по мобильной разработке с фокусом на реальные кейсы. ASI Biont поддерживает подключение к различным API через свою платформу — подробнее на asibiont.com/courses.

Попробуйте эти промты уже сегодня и оцените, насколько быстрее вы сможете разрабатывать мобильные приложения!

← Все статьи

Комментарии

Читайте также

Вышла новая GPT-5.6, GPT-Live и ChatGPTWork: что подготовили OpenAI — разбор для бизнеса

10 июля 2026

Как AI-агент ASI Biont автоматизирует мониторинг и инциденты через Datadog: интеграция без боли

10 июля 2026

За гранью хайпа: почему «Прогресс в вайб-кодинге» — самый практичный курс по ИИ для разработчиков в 2026 году

10 июля 2026

Интеграция ROS2-робота с AI-агентом ASI Biont: удалённое управление, мониторинг и автоматизация без сложного программирования

10 июля 2026

Meta врывается в битву AI-кодинга: что нужно знать о Muse Spark 1.1

10 июля 2026

OpenAI закрывает Atlas, но амбиции в области AI-браузеров продолжают расти

10 июля 2026

10 промтов для GitHub Copilot: от коммитов до code review — AI-ассистент в помощь разработчику

10 июля 2026

Интеграция Modbus/TCP (PLC, RTU) с AI-агентом ASI Biont: прогнозы, тренды и практические рекомендации

10 июля 2026

Zigbee и AI-агент: как ASI Biont управляет 30+ датчиками через Zigbee2MQTT и MQTT

10 июля 2026