// Картка як єдиний доступний елемент:
<View accessible={true} accessibilityLabel="Поїздка до Карпат, 5 жовтня">
  <Image source={...} />
  <Text>Карпати</Text>
  <Text>5 жовтня</Text>
</View>
// VoiceOver зачитає: "Поїздка до Карпат, 5 жовтня"
// а не окремо кожен Text

// ❌ Погано: скрінрідер скаже "Кнопка" або нічого
<Pressable onPress={handleAdd}>
  <Icon name="plus" />
</Pressable>

// ✅ Добре: зрозумілий опис дії
<Pressable
  onPress={handleAdd}
  accessibilityLabel="Додати нову поїздку"
>
  <Icon name="plus" />
</Pressable>

<Pressable
  accessibilityLabel="Видалити поїздку"
  accessibilityHint="Двічі торкніться, щоб безповоротно видалити поїздку"
  onPress={handleDelete}
>
  <Icon name="trash" />
</Pressable>

function TripCard({ trip, onPress, onDelete }) {
  return (
    <Pressable
      accessible={true}
      accessibilityRole="button"
      accessibilityLabel={`Поїздка ${trip.name}, ${trip.date}`}
      accessibilityHint="Двічі торкніться для перегляду деталей"
      onPress={onPress}
      style={styles.card}
    >
      {/* Зображення — декоративне, ховаємо від скрінрідера */}
      <Image
        source={trip.image}
        style={styles.image}
        accessible={false}
        accessibilityElementsHidden={true}
      />

      {/* Заголовок поїздки */}
      <View>
        <Text
          style={styles.name}
          accessibilityRole="header"
        >
          {trip.name}
        </Text>
        <Text style={styles.date}>{trip.date}</Text>
      </View>

      {/* Кнопка видалення */}
      <Pressable
        accessibilityRole="button"
        accessibilityLabel={`Видалити поїздку ${trip.name}`}
        accessibilityHint="Дія незворотна"
        onPress={onDelete}
        hitSlop={12}
      >
        <Icon name="trash" />
      </Pressable>
    </Pressable>
  );
}

function AccessibleCheckbox({ label, checked, onToggle }) {
  return (
    <Pressable
      accessible={true}
      accessibilityRole="checkbox"
      accessibilityLabel={label}
      accessibilityState={{ checked }}
      onPress={onToggle}
      style={styles.row}
    >
      <View style={[styles.box, checked && styles.boxChecked]}>
        {checked && <Icon name="check" color="white" size={14} />}
      </View>
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}
// VoiceOver при checked=true: "Отримувати сповіщення, прапорець, увімкнено"
// VoiceOver при checked=false: "Отримувати сповіщення, прапорець, вимкнено"

function AccessibleSwitch({ label, value, onValueChange }) {
  return (
    <View style={styles.row}>
      <Text style={styles.label}>{label}</Text>
      <Pressable
        accessibilityRole="switch"
        accessibilityLabel={label}
        accessibilityState={{ checked: value }}
        onPress={() => onValueChange(!value)}
      >
        <View style={[styles.track, value && styles.trackOn]}>
          <View style={[styles.thumb, value && styles.thumbOn]} />
        </View>
      </Pressable>
    </View>
  );
}

// Progress bar:
<View
  accessibilityRole="progressbar"
  accessibilityLabel="Завантаження поїздки"
  accessibilityValue={{ min: 0, max: 100, now: progress }}
  style={styles.progressBar}
>
  <View style={[styles.fill, { width: `${progress}%` }]} />
</View>
// VoiceOver: "Завантаження поїздки, індикатор прогресу, 45%"

// Рейтинг:
<View
  accessible={true}
  accessibilityRole="image"
  accessibilityLabel="Рейтинг готелю"
  accessibilityValue={{ text: `${rating} зірок з 5` }}
>
  <Stars rating={rating} />
</View>
// VoiceOver: "Рейтинг готелю, 4.2 зірок з 5"

// Декоративна іконка поруч з текстом
<View style={styles.row}>
  <Icon
    name="star"
    accessibilityElementsHidden={true} // ховаємо іконку
  />
  <Text>Улюблені місця</Text>
</View>
// VoiceOver прочитає лише "Улюблені місця"

// 'auto' — система вирішує (дефолт)
// 'yes' — включити (навіть якщо система б проігнорувала)
// 'no' — виключити цей елемент (але нащадки залишаються)
// 'no-hide-descendants' — виключити і всіх нащадків

<View importantForAccessibility="no-hide-descendants">
  {/* Весь цей View і його діти ігноруються TalkBack */}
  <DecorativeAnimation />
</View>

// Маленька іконка — велика зона торкання:
<Pressable
  hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
  onPress={handleClose}
  style={{ width: 20, height: 20 }} // 20pt візуально
>
  {/* Але зона торкання — 44×44pt */}
  <Icon name="x" size={20} />
</Pressable>

// Або коротко — однакові відступи з усіх боків:
<Pressable hitSlop={12} onPress={handleBack}>
  <Icon name="chevron-left" size={22} />
</Pressable>

// Утиліта для дев-режиму:
function MinTouchTarget({ children, style, ...props }) {
  const handleLayout = ({ nativeEvent: { layout } }) => {
    if (__DEV__) {
      const { width, height } = layout;
      if (width < 44 || height < 44) {
        console.warn(
          `Touch target занадто маленький: ${width.toFixed(0)}×${height.toFixed(0)}pt. Мінімум 44×44pt`
        );
      }
    }
  };

  return (
    <Pressable style={style} onLayout={handleLayout} {...props}>
      {children}
    </Pressable>
  );
}

import { AccessibilityInfo } from 'react-native';

// Асинхронна перевірка:
const isEnabled = await AccessibilityInfo.isScreenReaderEnabled();

// Або через хук:
import { useState, useEffect } from 'react';

function useScreenReader() {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    // Початковий стан
    AccessibilityInfo.isScreenReaderEnabled().then(setIsEnabled);

    // Слухач змін
    const subscription = AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      setIsEnabled
    );

    return () => subscription.remove();
  }, []);

  return isEnabled;
}

// Після успішного збереження:
AccessibilityInfo.announceForAccessibility('Поїздку збережено успішно');

// Після помилки:
AccessibilityInfo.announceForAccessibility('Помилка: введіть назву поїздки');

// При оновленні лічильника:
AccessibilityInfo.announceForAccessibility(`Додано ${count} елементів до списку`);

import { AccessibilityInfo, findNodeHandle, useRef } from 'react';

function Modal({ title, onClose }) {
  const titleRef = useRef(null);

  useEffect(() => {
    // Коли Modal змонтовано — переміщуємо фокус на заголовок
    const timer = setTimeout(() => {
      if (titleRef.current) {
        const node = findNodeHandle(titleRef.current);
        if (node) AccessibilityInfo.setAccessibilityFocus(node);
      }
    }, 100); // невелика затримка для анімації

    return () => clearTimeout(timer);
  }, []);

  return (
    <View accessible={true} accessibilityViewIsModal={true}>
      <Text ref={titleRef} accessibilityRole="header">{title}</Text>
      <Pressable accessibilityLabel="Закрити вікно" onPress={onClose}>
        <Icon name="x" />
      </Pressable>
    </View>
  );
}

// ✅ Правильно — масштаб враховується (дефолт):
<Text style={{ fontSize: 16 }}>Назва поїздки</Text>

// ⚠️ Вимкнути тільки якщо є вагома причина:
<Text style={{ fontSize: 10 }} allowFontScaling={false}>
  © 2024
</Text>

<Text
  style={{ fontSize: 16 }}
  maxFontSizeMultiplier={1.5} // максимум 150% від базового розміру
>
  {trip.name}
</Text>

// TabBar label — не даємо рости більш ніж вдвічі:
<Text style={{ fontSize: 12 }} maxFontSizeMultiplier={2.0}>
  Поїздки
</Text>

// ❌ Фіксована висота — поламається при великому шрифті:
<View style={{ height: 44, flexDirection: 'row', alignItems: 'center' }}>
  <Text>Назва поїздки</Text>
  <Icon name="chevron" />
</View>

// ✅ Гнучка висота — адаптується:
<View style={{ minHeight: 44, flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }}>
  <Text style={{ flex: 1 }}>Назва поїздки</Text>
  <Icon name="chevron" />
</View>

// ❌ Погано: сірий текст на білому (#94A3B8 на #FFFFFF = 2.5:1)
<Text style={{ color: '#94A3B8', backgroundColor: 'white' }}>
  Опис поїздки
</Text>

// ✅ Добре: темний текст (#475569 на #FFFFFF = 4.7:1)
<Text style={{ color: '#475569', backgroundColor: 'white' }}>
  Опис поїздки
</Text>

// ✅ Відмінно: (#1E293B на #FFFFFF = 16.8:1)
<Text style={{ color: '#1E293B', backgroundColor: 'white' }}>
  Назва поїздки
</Text>

// ❌ Погано: помилка і успіх відрізняються лише кольором
<Text style={{ color: isError ? 'red' : 'green' }}>
  {message}
</Text>

// ✅ Добре: колір + іконка + текст-індикатор
<View style={styles.messageRow}>
  <Icon name={isError ? 'x-circle' : 'check-circle'} color={isError ? '#EF4444' : '#10B981'} />
  <Text style={[styles.message, { color: isError ? '#DC2626' : '#059669' }]}>
    {isError ? `Помилка: ${message}` : `Успішно: ${message}`}
  </Text>
</View>

npx expo install expo-localization i18next react-i18next

import * as Localization from 'expo-localization';

// Мова пристрою:
console.log(Localization.locale);     // 'uk-UA', 'en-US', 'pl-PL'
console.log(Localization.locales);    // ['uk-UA', 'en-US'] — пріоритетний список

// Регіон і часовий пояс:
console.log(Localization.region);     // 'UA'
console.log(Localization.timezone);   // 'Europe/Kyiv'

// RTL (право-ліво, для арабської, іврит):
console.log(Localization.isRTL);      // false для UA/EN

// i18n/config.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as Localization from 'expo-localization';

const resources = {
  uk: {
    translation: {
      // Загальне
      'common.save': 'Зберегти',
      'common.cancel': 'Скасувати',
      'common.delete': 'Видалити',
      'common.loading': 'Завантаження...',
      'common.error': 'Сталася помилка',

      // Поїздки
      'trips.title': 'Мої подорожі',
      'trips.add': 'Додати поїздку',
      'trips.empty': 'Ще немає поїздок',
      'trips.count_one': '{{count}} поїздка',
      'trips.count_few': '{{count}} поїздки',
      'trips.count_many': '{{count}} поїздок',
      'trips.delete_confirm': 'Видалити поїздку «{{name}}»?',

      // Форма
      'form.name': 'Назва',
      'form.name_placeholder': 'Наприклад: Карпати 2024',
      'form.date': 'Дата',
      'form.required': 'Обов\'язкове поле',
    },
  },
  en: {
    translation: {
      'common.save': 'Save',
      'common.cancel': 'Cancel',
      'common.delete': 'Delete',
      'common.loading': 'Loading...',
      'common.error': 'An error occurred',

      'trips.title': 'My Trips',
      'trips.add': 'Add Trip',
      'trips.empty': 'No trips yet',
      'trips.count_one': '{{count}} trip',
      'trips.count_other': '{{count}} trips',
      'trips.delete_confirm': 'Delete trip "{{name}}"?',

      'form.name': 'Name',
      'form.name_placeholder': 'e.g. Carpathians 2024',
      'form.date': 'Date',
      'form.required': 'Required field',
    },
  },
};

// Визначаємо мову за системними налаштуваннями:
const deviceLocale = Localization.locale.split('-')[0]; // 'uk', 'en', 'pl'
const supportedLocales = ['uk', 'en'];
const lng = supportedLocales.includes(deviceLocale) ? deviceLocale : 'uk';

i18n.use(initReactI18next).init({
  resources,
  lng,
  fallbackLng: 'uk',
  interpolation: { escapeValue: false }, // React вже екранує
});

export default i18n;

// app/_layout.tsx
import '@/i18n/config'; // ініціалізуємо i18n одразу
import { I18nextProvider } from 'react-i18next';
import i18n from '@/i18n/config';

export default function RootLayout() {
  return (
    <I18nextProvider i18n={i18n}>
      {/* решта layout */}
    </I18nextProvider>
  );
}

import { useTranslation } from 'react-i18next';

export function TripsScreen() {
  const { t } = useTranslation();
  const [trips, setTrips] = useState([...]);

  return (
    <View>
      {/* Простий рядок */}
      <Text accessibilityRole="header">{t('trips.title')}</Text>

      {/* З параметром */}
      <Text>{t('trips.count', { count: trips.length })}</Text>
      // → "3 поїздки" (UA) або "3 trips" (EN)

      {/* Підтвердження з назвою */}
      <Text>{t('trips.delete_confirm', { name: selectedTrip.name })}</Text>
      // → "Видалити поїздку «Карпати 2024»?"

      {/* Порожній стан */}
      {trips.length === 0 && (
        <Text>{t('trips.empty')}</Text>
      )}
    </View>
  );
}

// i18next автоматично обирає форму за `count`:
t('trips.count', { count: 1 })   // → "1 поїздка"
t('trips.count', { count: 3 })   // → "3 поїздки"
t('trips.count', { count: 10 })  // → "10 поїздок"