Camera, location and permissions: device APIs

npx expo install expo-location expo-camera expo-image-picker

{
  "expo": {
    "name": "Branches",
    "ios": {
      "bundleIdentifier": "com.example.branches"
    },
    "android": {
      "package": "com.example.branches",
      "blockedPermissions": [
        "android.permission.RECORD_AUDIO"
      ]
    },
    "plugins": [
      [
        "expo-location",
        {
          "locationWhenInUsePermission": "Геолокация нужна, чтобы показать ближайший к вам филиал и расстояние до него."
        }
      ],
      [
        "expo-camera",
        {
          "cameraPermission": "Камера нужна, чтобы сканировать QR-код на чеке и фотографировать товар для обращения в поддержку.",
          "microphonePermission": false,
          "recordAudioAndroid": false
        }
      ],
      [
        "expo-image-picker",
        {
          "photosPermission": "Доступ к фото нужен, чтобы прикрепить снимок к обращению в поддержку.",
          "cameraPermission": "Камера нужна, чтобы сканировать QR-код на чеке и фотографировать товар для обращения в поддержку.",
          "microphonePermission": false
        }
      ]
    ]
  }
}

$ npx expo config --type introspect
      NSPhotoLibraryUsageDescription: 'Доступ к фото нужен, чтобы прикрепить снимок к обращению в поддержку.',
      NSCameraUsageDescription: 'Камера нужна, чтобы сканировать QR-код на чеке и фотографировать товар для обращения в поддержку.',
      NSLocationAlwaysAndWhenInUseUsageDescription: 'Allow $(PRODUCT_NAME) to access your location',
      NSLocationAlwaysUsageDescription: 'Allow $(PRODUCT_NAME) to access your location',
      NSLocationWhenInUseUsageDescription: 'Геолокация нужна, чтобы показать ближайший к вам филиал и расстояние до него.',
      NSMotionUsageDescription: 'Allow $(PRODUCT_NAME) to detect your current motion activity',
      …
      'android.permission.ACCESS_COARSE_LOCATION',
      'android.permission.ACCESS_FINE_LOCATION',
      'android.permission.CAMERA'
      …
                  'android:name': 'android.permission.RECORD_AUDIO',
                  'tools:node': 'remove'

import type { PermissionResponse } from 'expo';

// Что показать на экране для текущего статуса разрешения
export type PermissionView = 'loading' | 'explain' | 'granted' | 'settings';

export function permissionView(permission: PermissionResponse | null): PermissionView {
  if (!permission) return 'loading'; // статус ещё читается
  if (permission.granted) return 'granted';
  // ещё не спрашивали или систему можно спросить повторно
  if (permission.status === 'undetermined' || permission.canAskAgain) return 'explain';
  return 'settings'; // системный диалог больше не появится — только настройки
}

export type Coords = { latitude: number; longitude: number };
export type Branch = { id: string; name: string; address: string } & Coords;
export type BranchWithDistance = Branch & { distanceM: number };

// расстояние по поверхности Земли (формула гаверсинусов), в метрах
export function distanceM(a: Coords, b: Coords): number {
  const R = 6_371_000;
  const toRad = (deg: number) => (deg * Math.PI) / 180;
  const dLat = toRad(b.latitude - a.latitude);
  const dLon = toRad(b.longitude - a.longitude);
  const h =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(toRad(a.latitude)) * Math.cos(toRad(b.latitude)) * Math.sin(dLon / 2) ** 2;
  return 2 * R * Math.asin(Math.sqrt(h));
}

export function sortByDistance(branches: Branch[], from: Coords): BranchWithDistance[] {
  return branches
    .map((branch) => ({ ...branch, distanceM: distanceM(from, branch) }))
    .sort((x, y) => x.distanceM - y.distanceM);
}

export function formatDistance(m: number): string {
  if (m < 1000) return `${Math.round(m / 10) * 10} м`;
  return `${(m / 1000).toFixed(1).replace('.', ',')} км`;
}

import { useState } from 'react';
import { ActivityIndicator, Button, FlatList, Linking, StyleSheet, Text, View } from 'react-native';
import * as Location from 'expo-location';
import { BRANCHES } from '../branches/data';
import { formatDistance, sortByDistance, type Branch, type BranchWithDistance } from '../branches/nearest';
import { permissionView } from '../permissions/permissionView';

export default function NearestBranchScreen() {
  // хук читает статус при монтировании, но не показывает системный диалог
  const [permission, requestPermission] = Location.useForegroundPermissions();
  const [sorted, setSorted] = useState<BranchWithDistance[] | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function findNearest() {
    setBusy(true);
    setError(null);
    try {
      // системный диалог — только по нажатию, в момент, когда человек сам попросил
      const result = permission?.granted ? permission : await requestPermission();
      if (!result.granted) return; // экран сам перейдёт в состояние «explain» или «settings»

      if (!(await Location.hasServicesEnabledAsync())) {
        setError('Геолокация выключена в системе. Включите её или выберите филиал из списка.');
        return;
      }
      // быстрый ответ из кэша системы, иначе — новое определение с точностью ~100 м
      const position =
        (await Location.getLastKnownPositionAsync({ maxAge: 5 * 60 * 1000 })) ??
        (await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced }));
      setSorted(sortByDistance(BRANCHES, position.coords));
    } catch {
      setError('Не удалось определить местоположение. Выберите филиал из списка.');
    } finally {
      setBusy(false);
    }
  }

  const view = permissionView(permission);
  const rows: (Branch & { distanceM?: number })[] = sorted ?? BRANCHES;

  return (
    <View style={styles.screen}>
      {view === 'explain' && !sorted && (
        <View style={styles.card}>
          <Text>Покажем ближайший филиал и расстояние до него. Местоположение нужно только сейчас и не сохраняется.</Text>
          <Button title="Найти ближайший" onPress={findNearest} disabled={busy} />
        </View>
      )}
      {view === 'granted' && !sorted && (
        <Button title="Найти ближайший" onPress={findNearest} disabled={busy} />
      )}
      {view === 'settings' && (
        <View style={styles.card}>
          <Text>Доступ к геолокации запрещён. Его можно включить в настройках — или выберите филиал вручную.</Text>
          <Button title="Открыть настройки" onPress={() => Linking.openSettings()} />
        </View>
      )}
      {busy && <ActivityIndicator />}
      {error && <Text style={styles.error}>{error}</Text>}

      {/* список доступен всегда: без разрешения функция деградирует, а не исчезает */}
      <FlatList
        data={rows}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.row}>
            <Text style={styles.name}>{item.name}</Text>
            <Text>
              {item.address}
              {item.distanceM !== undefined ? ` · ${formatDistance(item.distanceM)}` : ''}
            </Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, gap: 12 },
  card: { gap: 8, padding: 12, borderRadius: 12, backgroundColor: '#f2f4f7' },
  error: { color: '#b00020' },
  row: { paddingVertical: 10, borderBottomWidth: StyleSheet.hairlineWidth },
  name: { fontWeight: '600' },
});

import { useState } from 'react';
import { Button, Linking, StyleSheet, Text, View } from 'react-native';
import { CameraView, useCameraPermissions, type BarcodeScanningResult } from 'expo-camera';
import { permissionView } from '../permissions/permissionView';

type Props = { onScanned: (code: string) => void };

export default function ScanReceiptScreen({ onScanned }: Props) {
  const [permission, requestPermission] = useCameraPermissions();
  const [done, setDone] = useState(false);

  function handleScan({ data }: BarcodeScanningResult) {
    if (done) return; // колбэк срабатывает на каждом кадре с кодом — берём первый
    setDone(true);
    onScanned(data);
  }

  switch (permissionView(permission)) {
    case 'loading':
      return <View style={styles.center} />;
    case 'explain':
      return (
        <View style={styles.center}>
          <Text style={styles.text}>Наведите камеру на QR-код на чеке — найдём ваш заказ.</Text>
          <Button title="Продолжить" onPress={requestPermission} />
        </View>
      );
    case 'settings':
      return (
        <View style={styles.center}>
          <Text style={styles.text}>Без камеры код не отсканировать. Включите доступ в настройках или введите номер заказа вручную.</Text>
          <Button title="Открыть настройки" onPress={() => Linking.openSettings()} />
        </View>
      );
    case 'granted':
      return (
        <CameraView
          style={styles.camera}
          facing="back"
          barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
          onBarcodeScanned={done ? undefined : handleScan}
        />
      );
  }
}

const styles = StyleSheet.create({
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12, padding: 24 },
  text: { textAlign: 'center' },
  camera: { flex: 1 },
});

import * as ImagePicker from 'expo-image-picker';

// Галерея: системный пикер не требует разрешения — пользователь сам выбирает файл
export async function pickFromLibrary(): Promise<string | null> {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ['images'],
    quality: 0.7,
  });
  return result.canceled ? null : result.assets[0].uri;
}

// Камера: разрешение нужно, запрашиваем прямо перед съёмкой
export async function takePhoto(): Promise<string | null | 'denied'> {
  const permission = await ImagePicker.requestCameraPermissionsAsync();
  if (!permission.granted) return 'denied';
  const result = await ImagePicker.launchCameraAsync({ mediaTypes: ['images'], quality: 0.7 });
  return result.canceled ? null : result.assets[0].uri;
}

import { Linking } from 'react-native';
import { fireEvent, render, screen } from '@testing-library/react-native';
import * as Location from 'expo-location';
import NearestBranchScreen from '../src/screens/NearestBranchScreen';

// нативный модуль геолокации подменяем: разрешение и координаты задаёт тест
let mockPermission: object | null = null;
const mockRequest = jest.fn();
jest.mock('expo-location', () => ({
  useForegroundPermissions: () => [mockPermission, mockRequest],
  hasServicesEnabledAsync: jest.fn(async () => true),
  getLastKnownPositionAsync: jest.fn(async () => null),
  getCurrentPositionAsync: jest.fn(async () => ({ coords: { latitude: 43.205, longitude: 76.894 } })),
  Accuracy: { Balanced: 3 },
}));

beforeEach(() => jest.clearAllMocks());

test('диалог не появляется сам: сначала объяснение, запрос — по кнопке', async () => {
  mockPermission = { status: 'undetermined', granted: false, canAskAgain: true, expires: 'never' };
  mockRequest.mockResolvedValue({ status: 'granted', granted: true, canAskAgain: true, expires: 'never' });
  await render(<NearestBranchScreen />);
  expect(screen.getByText(/Местоположение нужно только сейчас/)).toBeOnTheScreen();
  expect(mockRequest).not.toHaveBeenCalled();

  await fireEvent.press(screen.getByText('Найти ближайший'));
  expect(mockRequest).toHaveBeenCalledTimes(1);
  expect(await screen.findByText('пр. Учебный, 25 · 180 м')).toBeOnTheScreen();
  expect(Location.getCurrentPositionAsync).toHaveBeenCalledWith({ accuracy: 3 });
});

test('окончательный отказ: кнопка настроек, список филиалов остаётся', async () => {
  mockPermission = { status: 'denied', granted: false, canAskAgain: false, expires: 'never' };
  const openSettings = jest.spyOn(Linking, 'openSettings').mockResolvedValue();
  await render(<NearestBranchScreen />);
  await fireEvent.press(screen.getByText('Открыть настройки'));
  expect(openSettings).toHaveBeenCalled();
  expect(screen.getByText('ул. Примерная, 1')).toBeOnTheScreen();
  expect(mockRequest).not.toHaveBeenCalled();
});

test('геолокация выключена в системе → понятная ошибка', async () => {
  mockPermission = { status: 'granted', granted: true, canAskAgain: true, expires: 'never' };
  (Location.hasServicesEnabledAsync as jest.Mock).mockResolvedValueOnce(false);
  await render(<NearestBranchScreen />);
  await fireEvent.press(screen.getByText('Найти ближайший'));
  expect(await screen.findByText(/Геолокация выключена в системе/)).toBeOnTheScreen();
  expect(Location.getCurrentPositionAsync).not.toHaveBeenCalled();
});

$ npx tsc --noEmit
$ npx jest --verbose
PASS __tests__/logic.test.ts
  √ permissionView: от статуса к состоянию экрана (10 ms)
  √ расстояние и сортировка филиалов (1 ms)
  √ formatDistance
PASS __tests__/NearestBranchScreen.test.tsx
  √ диалог не появляется сам: сначала объяснение, запрос — по кнопке (505 ms)
  √ окончательный отказ: кнопка настроек, список филиалов остаётся (7 ms)
  √ геолокация выключена в системе → понятная ошибка (6 ms)
Tests:       6 passed, 6 total
$ npx expo export --platform android --platform ios
iOS Bundled 8485ms index.ts (606 modules)
Android Bundled 11385ms index.ts (604 modules)
Exported: dist
$ npx expo-doctor
21/21 checks passed. No issues detected!