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

Создай компонент React Native под названием PrimaryButton. Он должен принимать пропсы: title (string), onPress (функция), loading (boolean, по умолчанию false), disabled (boolean, по умолчанию false) и icon (React.ReactNode, опционально). Используй StyleSheet.create для стилей. Если loading=true — покажи ActivityIndicator вместо текста. Если disabled=true — сделай кнопку полупрозрачной (opacity: 0.5) и отключи onPress. Добавь анимацию нажатия с помощью Animated API (уменьшение scale до 0.96). Напиши код на TypeScript.

<PrimaryButton
  title="Отправить"
  onPress={() => alert('Отправлено!')}
  loading={isSubmitting}
  disabled={!isFormValid}
  icon={<Icon name="send" />}
/>

Напиши конфигурацию навигации для React Native приложения с использованием @react-navigation/native и @react-navigation/bottom-tabs. У нас есть три таба: HomeStack (с экранами Home и Profile), SearchStack (с экраном Search) и SettingsStack (с экраном Settings и Details). Каждый Stack должен содержать свой собственный navigator. Используй TypeScript. Стилизуй tabBar: активный цвет — '#4A90D9', неактивный — '#888', добавь иконки из @expo/vector-icons (Ionicons).

Создай кастомный хук useFetch<T>(url: string, options?: { retries?: number, cacheTime?: number }). Хук должен возвращать { data: T

| null, loading: boolean, error: string | null, refetch: () => void }. Используй fetch. Реализуй:
- Повторные попытки при ошибках сети (до 3 раз, с задержкой 1с между попытками)
- Кэширование в памяти с временем жизни cacheTime (по умолчанию 5 минут)
- Отмену запроса при размонтировании компонента с помощью AbortController
- Обработку HTTP ошибок (4xx, 5xx) и выбрасывание исключений с текстом ошибки
- Напиши на TypeScript.

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

Создай компонент LoginForm с использованием Formik и Yup. Поля: email (email, обязательное), password (строка, минимум 8 символов, должна содержать хотя бы одну цифру). Используй React Native TextInput. При ошибках валидации показывай красный текст под полем. Кнопка отправки должна быть заблокирована, пока форма невалидна. После успешной отправки выведи alert с данными. Напиши на TypeScript.

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Неверный формат email').required('Обязательное поле'),
  password: Yup.string().min(8, 'Минимум 8 символов').matches(/\d/, 'Должна быть цифра').required(),
});

Напиши компонент OptimizedList, который использует FlatList с виртуализацией. Каждый элемент — это Card с изображением (Image с resizeMode='cover'), заголовком и описанием. Реализуй:
- getItemLayout для фиксированной высоты (120px), чтобы избежать измерения
- keyExtractor на основе id
- windowSize={5} и maxToRenderPerBatch={10}
- initialNumToRender={10}
- Используй React.memo для компонента элемента
- Добавь pull-to-refresh с RefreshControl
- Напиши на TypeScript.

Создай сервис StorageService, который оборачивает @react-native-async-storage/async-storage. Методы: getItem<T>(key: string): Promise<T | null>, setItem<T>(key: string, value: T): Promise<void>, removeItem(key: string): Promise<void>. Добавь логирование ошибок в консоль. Напиши на TypeScript.

await StorageService.setItem('theme', { mode: 'dark', fontSize: 16 });
const theme = await StorageService.getItem<Theme>('theme');

Напиши компонент AnimatedModal с использованием react-native-reanimated 3. Модальное окно должно появляться снизу с анимацией slide-up (translateY от 300 до 0) за 300ms. Задний фон (overlay) должен плавно появляться (opacity от 0 до 0.5). При закрытии — обратная анимация. Используй useSharedValue, withTiming и Animated.View. Напиши на TypeScript.

Напиши хук useFirebaseAuth, который использует @react-native-firebase/auth. Методы: signIn(email, password), signUp(email, password), signOut(). Хук должен возвращать { user, loading, error, signIn, signUp, signOut }. Используйте onAuthStateChanged для отслеживания состояния пользователя. Обрабатывай ошибки (неверный пароль, пользователь не найден и т.д.) и возвращай понятное сообщение на русском. Напиши на TypeScript.

Напиши тесты для компонента PrimaryButton из первого промта. Используй @testing-library/react-native и Jest. Проверь:
- Компонент рендерится с переданным title
- При нажатии вызывается onPress
- При loading=true отображается ActivityIndicator, а текст скрыт
- При disabled=true кнопка не реагирует на нажатие
- Иконка рендерится, если передана
- Напиши на TypeScript.

Создай хук useLocation, который использует expo-location. Хук должен запрашивать разрешение foreground. Возвращать { latitude: number

| null, longitude: number | null, error: string | null, loading: boolean }. Если разрешение отклонено — верни ошибку 'Разрешение на геолокацию не предоставлено'. Используй Location.getCurrentPositionAsync с accuracy: Location.Accuracy.High. Напиши на TypeScript.