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

Напиши React Native компонент ProductCard, который принимает props: imageUrl, title, price, onAddToCart. Используй StyleSheet.create, Flexbox для расположения элементов. Карточка должна быть с тенью, скруглёнными углами (borderRadius: 12). Изображение — квадратное 100x100. Цена — полужирная, зелёного цвета (#2E7D32). Кнопка добавления — синяя (#1976D2) с белым текстом.

<ProductCard
  imageUrl="https://example.com/product.jpg"
  title="Кроссовки Nike Air"
  price={4500}
  onAddToCart={() => console.log('Добавлено')}
/>

Создай компонент CustomTabBar для React Native с использованием @react-navigation/bottom-tabs. У табов должно быть 4 вкладки: Home, Search, Cart, Profile. Для каждой вкладки укажи иконку из react-native-vector-icons (MaterialIcons). На вкладке Cart должен отображаться бейдж с числом (prop: cartCount). Цвет активной вкладки — #FF6F00, неактивной — #BDBDBD.

<CustomTabBar cartCount={3} />

Напиши компонент LoadingSpinner на React Native, используя Animated. Он должен показывать круговой индикатор (View с borderRadius: 25 и borderWidth: 4), который вращается бесконечно. Анимация — интерполяция rotate от '0deg' до '360deg' за 1 секунду. Компонент принимает prop: size (число, по умолчанию 50) и color (строка, по умолчанию '#1976D2'). При монтировании — плавное появление (opacity от 0 до 1 за 300ms).

<LoadingSpinner size={80} color="#FF6F00" />

Создай конфигурацию Stack Navigator для React Native с использованием @react-navigation/native-stack. Два экрана: ProfileScreen и SettingsScreen. В ProfileScreen передай параметр userId (число). Настрой header: заголовок «Профиль» для ProfileScreen, «Настройки» для SettingsScreen. Цвет фона хедера — #FFFFFF, высота — 56, заголовок — полужирный, размер 18.

// ProfileScreen
navigation.navigate('Settings', { userId: 123 });

Настрой Drawer Navigator для React Native с помощью @react-navigation/drawer. Кастомное содержимое drawerContent: вверху — изображение (Avatar) 80x80 с borderRadius: 40, под ним — имя пользователя (prop: userName) и email. Ниже — пункты меню: Главная, Заказы, Избранное, Выйти. Пункт «Выйти» — красного цвета. Цвет фона drawer — #F5F5F5.

<DrawerNavigator userName="Иван Иванов" />

Создай структуру навигации: нижний Tab Navigator с двумя вкладками — «Каталог» и «Корзина». Внутри вкладки «Каталог» — Stack Navigator с экранами: ProductList и ProductDetail. В ProductDetail передай параметр productId. Используй @react-navigation/native и @react-navigation/bottom-tabs.

// ProductList
navigation.navigate('ProductDetail', { productId: 456 });

Напиши кастомный хук useFetch для React Native. Он принимает url (строка) и возвращает объект { data, loading, error }. Используй fetch и useEffect. Если запрос успешен — data содержит JSON-ответ. Если ошибка — error содержит сообщение. Типизируй с помощью TypeScript: дженерик <T> для типа данных. Добавь обработку отмены запроса через AbortController.

const { data, loading, error } = useFetch<User[]>('https://api.example.com/users');

Создай функцию postData для React Native, которая принимает url (строка), body (объект) и headers (опционально, объект). Используй fetch с методом POST. По умолчанию Content-Type: application/json. Функция возвращает Promise с JSON-ответом. Добавь обработку ошибок: если статус ответа не 2xx — выбросить ошибку с текстом из ответа.

const response = await postData('https://api.example.com/login', {
  email: 'user@example.com',
  password: 'qwerty'
});

Напиши компонент InfiniteList для React Native, который использует FlatList. Он принимает fetchUrl (строка) — базовый URL API с пагинацией (параметры page и limit). При скролле до конца вызывай onEndReached и загружай следующую страницу. Показывай спиннер в футере во время загрузки. Храни все загруженные данные в state. Используй useCallback для оптимизации.

<InfiniteList fetchUrl="https://api.example.com/items?limit=20" />

Создай функцию fetchWithRetry для React Native. Она принимает url (строка), options (объект) и maxRetries (число, по умолчанию 3). При ошибке (сеть или статус 5xx) — жди 1 секунду и повторяй запрос. Используй setTimeout. Если все попытки исчерпаны — выброси последнюю ошибку. Верни Promise с JSON.

const data = await fetchWithRetry('https://api.example.com/data', {}, 5);