react-native-permissionsの使い方：iOS/Android対応のパーミッション管理を完全攻略

npm install react-native-permissions
# または
yarn add react-native-permissions

# Podfile先頭にヘルパー関数を追加
def node_require(script)
  require Pod::Executable.execute_command('node', ['-p',
    "require.resolve('#{script}', {paths: [process.argv[1]]})",
    __dir__]).strip
end

node_require('react-native/scripts/react_native_pods.rb')
node_require('react-native-permissions/scripts/setup.rb')

# 使用するパーミッションだけを指定（不要なものは削除）
setup_permissions([
  'Camera',
  'LocationWhenInUse',
  'Microphone',
  'Notifications',
  'PhotoLibrary',
])

cd ios && pod install

<key>NSCameraUsageDescription</key>
<string>プロフィール写真の撮影とQRコード読み取りに使用します</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>近くの店舗検索と配達時間の算出に使用します</string>
<key>NSMicrophoneUsageDescription</key>
<string>音声メッセージの録音とビデオ通話に使用します</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>投稿やメッセージに添付する画像の選択に使用します</string>

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

  <!-- Android 13以降のメディアアクセス -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />

  <!-- Android 14以降の選択的アクセス -->
  <uses-permission android:name="android.permission.READ_MEDIA_VISUAL_USER_SELECTED" />
</manifest>

{
  "expo": {
    "plugins": [
      [
        "react-native-permissions",
        {
          "iosPermissions": ["Camera", "Microphone", "PhotoLibrary"]
        }
      ]
    ],
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "写真撮影に使用します",
        "NSMicrophoneUsageDescription": "音声録音に使用します",
        "NSPhotoLibraryUsageDescription": "画像選択に使用します"
      }
    },
    "android": {
      "permissions": [
        "android.permission.CAMERA",
        "android.permission.RECORD_AUDIO"
      ]
    }
  }
}

import { check, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Platform } from 'react-native';

const permission = Platform.select({
  ios: PERMISSIONS.IOS.CAMERA,
  android: PERMISSIONS.ANDROID.CAMERA,
})!;

const status = await check(permission);
// => 'unavailable' | 'denied' | 'granted' | 'limited' | 'blocked'

import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';

const status = await request(
  Platform.OS === 'ios'
    ? PERMISSIONS.IOS.CAMERA
    : PERMISSIONS.ANDROID.CAMERA
);

if (status === RESULTS.GRANTED) {
  // カメラ機能を有効化
}

// Android向けの説明ダイアログ付きリクエスト
const status = await request(
  PERMISSIONS.ANDROID.CAMERA,
  {
    title: 'カメラへのアクセス',
    message: 'プロフィール写真の撮影にカメラを使用します',
    buttonPositive: '許可する',
    buttonNegative: 'キャンセル',
  }
);

import { requestMultiple, PERMISSIONS } from 'react-native-permissions';

const statuses = await requestMultiple([
  PERMISSIONS.ANDROID.CAMERA,
  PERMISSIONS.ANDROID.RECORD_AUDIO,
  PERMISSIONS.ANDROID.READ_MEDIA_IMAGES,
]);

console.log(statuses[PERMISSIONS.ANDROID.CAMERA]);      // => 'granted'
console.log(statuses[PERMISSIONS.ANDROID.RECORD_AUDIO]); // => 'denied'

import { checkNotifications, requestNotifications } from 'react-native-permissions';

// ステータスと詳細設定を取得
const { status, settings } = await checkNotifications();

// iOSではアラート・バッジ・サウンドの個別指定が可能
const result = await requestNotifications(['alert', 'badge', 'sound']);

import { openSettings } from 'react-native-permissions';

// アプリ設定画面を開く
await openSettings();

// 特定の設定画面を開く（通知設定など）
await openSettings('notifications');

アプリ起動
  └─ check() で確認
       ├─ UNAVAILABLE → 機能非対応（ハードウェア不在など）
       ├─ DENIED → 未リクエスト状態。request() 可能
       │    └─ request() 実行
       │         ├─ GRANTED → 許可された
       │         ├─ LIMITED → 制限付き許可（写真の部分アクセスなど）
       │         └─ BLOCKED → 拒否された（以降はシステム設定からのみ変更可能）
       ├─ GRANTED → 許可済み
       ├─ LIMITED → 制限付き許可
       └─ BLOCKED → 設定画面で変更が必要

アプリ起動
  └─ check() で確認
       ├─ UNAVAILABLE → 機能非対応
       ├─ DENIED → 未リクエストまたは再リクエスト可能
       │    └─ request() 実行
       │         ├─ GRANTED → 許可された
       │         ├─ DENIED → 拒否された（再リクエスト可能）
       │         └─ BLOCKED → 「今後表示しない」で拒否された
       └─ GRANTED → 許可済み

import { useState, useEffect, useCallback } from 'react';
import {
  check,
  request,
  openSettings,
  Permission,
  PermissionStatus,
  RESULTS,
} from 'react-native-permissions';
import { AppState, AppStateStatus } from 'react-native';

interface UsePermissionReturn {
  status: PermissionStatus | null;
  isGranted: boolean;
  isBlocked: boolean;
  requestPermission: () => Promise<PermissionStatus>;
  goToSettings: () => Promise<void>;
}

export function usePermission(permission: Permission): UsePermissionReturn {
  const [status, setStatus] = useState<PermissionStatus | null>(null);

  const checkPermission = useCallback(async () => {
    const result = await check(permission);
    setStatus(result);
    return result;
  }, [permission]);

  const requestPermission = useCallback(async () => {
    const result = await request(permission);
    setStatus(result);
    return result;
  }, [permission]);

  const goToSettings = useCallback(async () => {
    await openSettings();
  }, []);

  // 初回マウント時にステータスを確認
  useEffect(() => {
    checkPermission();
  }, [checkPermission]);

  // 設定画面から戻ったときにステータスを再確認
  useEffect(() => {
    let currentState = AppState.currentState;
    const subscription = AppState.addEventListener(
      'change',
      (nextState: AppStateStatus) => {
        if (
          currentState.match(/inactive|background/) &&
          nextState === 'active'
        ) {
          checkPermission();
        }
        currentState = nextState;
      },
    );
    return () => subscription.remove();
  }, [checkPermission]);

  return {
    status,
    isGranted: status === RESULTS.GRANTED || status === RESULTS.LIMITED,
    isBlocked: status === RESULTS.BLOCKED,
    requestPermission,
    goToSettings,
  };
}

import React from 'react';
import { View, Text, Button, Alert, Platform } from 'react-native';
import { PERMISSIONS, RESULTS } from 'react-native-permissions';
import { usePermission } from './hooks/usePermission';

const cameraPermission = Platform.select({
  ios: PERMISSIONS.IOS.CAMERA,
  android: PERMISSIONS.ANDROID.CAMERA,
})!;

export function CameraScreen() {
  const { status, isGranted, isBlocked, requestPermission, goToSettings } =
    usePermission(cameraPermission);

  const handlePress = async () => {
    if (isGranted) {
      // カメラを起動
      return;
    }

    const result = await requestPermission();

    if (result === RESULTS.BLOCKED) {
      Alert.alert(
        'カメラへのアクセスが必要です',
        '設定画面からカメラへのアクセスを許可してください。',
        [
          { text: 'キャンセル', style: 'cancel' },
          { text: '設定を開く', onPress: goToSettings },
        ],
      );
    }
  };

  if (status === null) {
    return null; // ステータス確認中
  }

  return (
    <View>
      {isGranted ? (
        <Text>カメラが利用可能です</Text>
      ) : (
        <Button title="カメラを使用する" onPress={handlePress} />
      )}
    </View>
  );
}

import { useState, useCallback, useEffect } from 'react';
import {
  checkMultiple,
  requestMultiple,
  Permission,
  PermissionStatus,
  RESULTS,
} from 'react-native-permissions';
import { AppState, AppStateStatus } from 'react-native';

export function useMultiplePermissions(permissions: Permission[]) {
  const [statuses, setStatuses] = useState<Record<string, PermissionStatus>>({});

  const checkAll = useCallback(async () => {
    const results = await checkMultiple(permissions);
    setStatuses(results);
    return results;
  }, [permissions]);

  const requestAll = useCallback(async () => {
    const results = await requestMultiple(permissions);
    setStatuses(results);
    return results;
  }, [permissions]);

  const allGranted = permissions.every(
    (p) => statuses[p] === RESULTS.GRANTED || statuses[p] === RESULTS.LIMITED,
  );

  const blockedPermissions = permissions.filter(
    (p) => statuses[p] === RESULTS.BLOCKED,
  );

  useEffect(() => {
    checkAll();
  }, [checkAll]);

  useEffect(() => {
    let currentState = AppState.currentState;
    const subscription = AppState.addEventListener(
      'change',
      (nextState: AppStateStatus) => {
        if (currentState.match(/inactive|background/) && nextState === 'active') {
          checkAll();
        }
        currentState = nextState;
      },
    );
    return () => subscription.remove();
  }, [checkAll]);

  return { statuses, checkAll, requestAll, allGranted, blockedPermissions };
}

import { Platform } from 'react-native';
import { requestMultiple, PERMISSIONS, RESULTS } from 'react-native-permissions';

async function requestMediaPermissions() {
  if (Platform.OS !== 'android') {
    // iOS の場合
    return request(PERMISSIONS.IOS.PHOTO_LIBRARY);
  }

  const apiLevel = Platform.Version;

  if (apiLevel >= 34) {
    // Android 14以降：選択的アクセス対応
    const statuses = await requestMultiple([
      PERMISSIONS.ANDROID.READ_MEDIA_IMAGES,
      PERMISSIONS.ANDROID.READ_MEDIA_VIDEO,
      PERMISSIONS.ANDROID.READ_MEDIA_VISUAL_USER_SELECTED,
    ]);
    return statuses;
  }

  if (apiLevel >= 33) {
    // Android 13：メディア種別ごとのパーミッション
    const statuses = await requestMultiple([
      PERMISSIONS.ANDROID.READ_MEDIA_IMAGES,
      PERMISSIONS.ANDROID.READ_MEDIA_VIDEO,
    ]);
    return statuses;
  }

  // Android 12以前
  return request(PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE);
}

[1] アプリ独自の説明画面（理由と利点を提示）
    ├─ 「許可する」 → [2] OSのシステムダイアログを表示
    └─ 「あとで」  → システムダイアログは表示しない（権限を温存）

// パーミッションがBLOCKEDの場合のフォールバック表示例
function PhotoPicker({ permission }: { permission: PermissionStatus }) {
  if (permission === RESULTS.BLOCKED) {
    return (
      <View style={styles.fallback}>
        <Text>写真へのアクセスが許可されていません</Text>
        <Button
          title="設定画面を開く"
          onPress={() => openSettings()}
        />
      </View>
    );
  }

  // 通常のフォトピッカーUI
  return <PhotoGrid />;
}

jest.mock('react-native-permissions', () =>
  require('react-native-permissions/mock')
);

module.exports = {
  setupFiles: ['<rootDir>/jest.setup.js'],
};

import { check, request, RESULTS } from 'react-native-permissions';
import { renderHook, act } from '@testing-library/react-hooks';
import { usePermission } from './usePermission';

describe('usePermission', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('初期状態でGRANTEDならisGrantedがtrueになる', async () => {
    (check as jest.Mock).mockResolvedValue(RESULTS.GRANTED);

    const { result, waitForNextUpdate } = renderHook(() =>
      usePermission('ios.permission.CAMERA')
    );

    await waitForNextUpdate();
    expect(result.current.isGranted).toBe(true);
  });

  it('DENIEDからrequestでGRANTEDに遷移する', async () => {
    (check as jest.Mock).mockResolvedValue(RESULTS.DENIED);
    (request as jest.Mock).mockResolvedValue(RESULTS.GRANTED);

    const { result, waitForNextUpdate } = renderHook(() =>
      usePermission('ios.permission.CAMERA')
    );

    await waitForNextUpdate();
    expect(result.current.isGranted).toBe(false);

    await act(async () => {
      await result.current.requestPermission();
    });

    expect(result.current.isGranted).toBe(true);
  });

  it('BLOCKEDの場合isBlockedがtrueになる', async () => {
    (check as jest.Mock).mockResolvedValue(RESULTS.BLOCKED);

    const { result, waitForNextUpdate } = renderHook(() =>
      usePermission('ios.permission.CAMERA')
    );

    await waitForNextUpdate();
    expect(result.current.isBlocked).toBe(true);
  });
});

// iOS: アプリ起動時にパーミッションを事前設定
await device.launchApp({
  permissions: { camera: 'YES', location: 'always' },
});

// Android: ADBでパーミッションを付与/取り消し
execSync(
  `adb shell pm grant com.example.app android.permission.CAMERA`
);
execSync(
  `adb shell pm revoke com.example.app android.permission.CAMERA`
);

// Androidでの正しいBLOCKED判定パターン
const status = await request(PERMISSIONS.ANDROID.CAMERA);
if (status === RESULTS.BLOCKED) {
  // 設定画面へ誘導
}