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

Создай компонент React Native (TypeScript) для кастомной кнопки с анимацией нажатия. Используй Animated API. Кнопка должна принимать пропсы: title (string), onPress (function), style (optional). Анимация: при нажатии масштаб уменьшается до 0.95, при отпускании возвращается к 1.0. Добавь поддержку accessibilityLabel. Предоставь полный код компонента и пример использования в функциональном компоненте.

import AnimatedButton from './AnimatedButton';

<AnimatedButton
  title="Нажми меня"
  onPress={() => Alert.alert('Кнопка нажата')}
  style={{ backgroundColor: '#6200EE', padding: 12 }}
/>

Напиши компонент React Native (JavaScript) с FlatList, который поддерживает pull-to-refresh и бесконечную прокрутку (lazy loading). Используй useState и useEffect. Данные должны загружаться с имитацией API (setTimeout с рандомными данными). Добавь индикатор загрузки при подгрузке (ActivityIndicator в FooterComponent). Реализуй обработку ошибок при загрузке. Предоставь полный код.

const [data, setData] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);

const loadMore = async () => {
  if (loadingMore) return;
  setLoadingMore(true);
  const newData = await fetchNewData();
  setData(prev => [...prev, ...newData]);
  setLoadingMore(false);
};

Создай компонент EmailInput в React Native (TypeScript). Он должен включать TextInput с маской, валидацию email (регулярное выражение), отображение ошибки под полем (красный текст), и кнопку очистки. Используй useState для значения и статуса валидации. Стили: borderColor меняется на красный при ошибке, на зелёный при успехе. Предоставь код и пример.

Напиши компонент Modal в React Native (JavaScript) с полупрозрачным фоном (backgroundColor: 'rgba(0,0,0,0.5)') и анимацией scale при открытии/закрытии. Используй React Native Modal и Animated. Компонент должен принимать пропсы: visible (boolean), onClose (function), children (ReactNode). Добавь обработку нажатия на фон для закрытия. Предоставь полный код.

Реализуй компонент SwipeableCard в React Native (TypeScript) с использованием PanResponder. Карточка должна двигаться за пальцем, и при смахивании > 100px по горизонтали — исчезать с анимацией. Добавь пропсы: onSwipeLeft, onSwipeRight, children. Стилизуй тень и скругления. Предоставь полный код.

Настрой Stack Navigator в React Native с использованием @react-navigation/native и @react-navigation/stack. Создай три экрана: HomeScreen, ProfileScreen, SettingsScreen. У каждого экрана должен быть заголовок (headerTitle). На ProfileScreen добавь кнопку "Назад" кастомную (иконка стрелки). Используй TypeScript для типизации пропсов навигации. Предоставь полный код App.tsx и экранов.

const Stack = createStackNavigator();

<Stack.Navigator initialRouteName="Home">
  <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Главная' }} />
  <Stack.Screen name="Profile" component={ProfileScreen} options={{ title: 'Профиль' }} />
</Stack.Navigator>

Реализуй Bottom Tab Navigator в React Native с помощью @react-navigation/bottom-tabs. Используй три вкладки: HomeTab, SearchTab, FavoritesTab. Для иконок используй react-native-vector-icons (Ionicons). Настрой активный цвет (#6200EE) и неактивный (серый). Сделай badge на вкладке Избранное (число 3). Предоставь полный код.

Покажи пример передачи параметров через Stack Navigator в React Native (TypeScript). Создай два экрана: ProductListScreen (список товаров) и ProductDetailScreen (детали). При нажатии на товар в списке передавай { productId: number, productName: string } через navigation.navigate. На ProductDetailScreen получи параметры через route.params. Типизируй параметры с помощью types.ts. Предоставь полный код.

// ProductListScreen
navigation.navigate('ProductDetail', { productId: 42, productName: 'Кроссовки' });
// ProductDetailScreen
const { productId } = route.params;

Настрой Drawer Navigator в React Native с @react-navigation/drawer. Кастомный контент DrawerContent: вверху аватарка (Image), имя пользователя, email. Ниже пункты: Главная, Мои заказы, Выйти. Используй TypeScript. Добавь иконки для каждого пункта. Предоставь полный код.

Настрой Deep Linking в React Native с React Navigation. Создай конфигурацию linking: префикс 'myapp://', маппинг пути '/product/:id' на экран ProductDetailScreen. Реализуй обработку параметра id на экране. Используй TypeScript. Предоставь код App.tsx и экрана с получением id.

Напиши кастомный хук useFetch в React Native (TypeScript). Он должен принимать URL (string) и возвращать { data, loading, error }. Используй fetch и useEffect. Добавь отмену запроса при размонтировании компонента (AbortController). Реализуй простой кэш (Map) на 10 запросов. Предоставь полный код хука и пример использования.

const { data, loading, error } = useFetch('https://api.example.com/products');

Создай экран регистрации в React Native (TypeScript) с полями: email, пароль, подтверждение пароля. При нажатии кнопки "Зарегистрироваться" отправь POST-запрос на https://api.example.com/register с телом { email, password }. Используй fetch. Обработай ответ: при успехе покажи Alert с "Успех", при ошибке — выведи сообщение. Добавь валидацию полей. Предоставь полный код.

Напиши функцию fetchWithRetry в React Native (JavaScript), которая делает fetch-запрос с таймаутом 5 секунд (AbortSignal.timeout). Если запрос не удался (сетевая ошибка или таймаут), повтори до 3 раз с задержкой 1 секунда между попытками. Функция должна возвращать Promise с данными или выбрасывать ошибку. Предоставь полный код и пример использования.

try {
  const data = await fetchWithRetry('https://api.example.com/data');
} catch (error) {
  console.error('Ошибка после 3 попыток');
}

Настрой Axios в React Native (TypeScript). Создай экземпляр axios с baseURL 'https://api.example.com'. Добавь перехватчик запроса, который добавляет заголовок Authorization: Bearer <token> из AsyncStorage. Добавь перехватчик ответа, который при статусе 401 очищает токен и перенаправляет на экран логина. Предоставь полный код конфигурации.

Реализуй хук useWebSocket в React Native (TypeScript). Он должен подключаться к wss://chat.example.com, принимать сообщения, и возвращать { messages, sendMessage, connected }. Используй WebSocket API. Добавь автоматическое переподключение при обрыве (каждые 3 секунды). Обработай события onopen, onmessage, onclose, onerror. Предоставь полный код хука и пример компонента чата.