[React Native] React Native 권한요청 구현

​https://github.com/zoontek/react-native-permissions

 

1. react-native-permissions 라이브러리 설치

$ npm install --save react-native-permissions
# --- or ---
$ yarn add react-native-permissions

 

iOS Xcode 세팅

2. Podfile에 추가 (필요한 권한 선택해서)

 permissions_path = '../node_modules/react-native-permissions/ios'

  pod 'Permission-AppTrackingTransparency', :path => "#{permissions_path}/AppTrackingTransparency"
  pod 'Permission-BluetoothPeripheral', :path => "#{permissions_path}/BluetoothPeripheral"
  pod 'Permission-Calendars', :path => "#{permissions_path}/Calendars"
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-Contacts', :path => "#{permissions_path}/Contacts"
  pod 'Permission-FaceID', :path => "#{permissions_path}/FaceID"
  pod 'Permission-LocationAccuracy', :path => "#{permissions_path}/LocationAccuracy"
  pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways"
  pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"
  pod 'Permission-MediaLibrary', :path => "#{permissions_path}/MediaLibrary"
  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"
  pod 'Permission-Motion', :path => "#{permissions_path}/Motion"
  pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
  pod 'Permission-PhotoLibraryAddOnly', :path => "#{permissions_path}/PhotoLibraryAddOnly"
  pod 'Permission-Reminders', :path => "#{permissions_path}/Reminders"
  pod 'Permission-Siri', :path => "#{permissions_path}/Siri"
  pod 'Permission-SpeechRecognition', :path => "#{permissions_path}/SpeechRecognition"
  pod 'Permission-StoreKit', :path => "#{permissions_path}/StoreKit"

 

3. Info.plist 에 권한요청 문구 추가 (필요한 key값)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>

  <!-- 🚨 Keep only the permissions used in your app 🚨 -->

  <key>NSAppleMusicUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSBluetoothAlwaysUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSBluetoothPeripheralUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSCalendarsUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSCameraUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSContactsUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSFaceIDUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSLocationTemporaryUsageDescriptionDictionary</key>
  <dict>
    <key>YOUR-PURPOSE-KEY</key>
    <string>YOUR TEXT</string>
  </dict>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSMotionUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSRemindersUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSSpeechRecognitionUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSSiriUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSUserTrackingUsageDescription</key>
  <string>YOUR TEXT</string>

  <!-- … -->

</dict>
</plist>

 

Android Android Studio 세팅 

4. Manifest.xml파일에 추가 (필요한 권한만)

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.myawesomeapp">

  <!-- 🚨 Keep only the permissions used in your app 🚨 -->

  <uses-permission android:name="android.permission.ACCEPT_HANDOVER" />
  <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION" />
  <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
  <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />
  <uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />
  <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
  <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
  <uses-permission android:name="android.permission.BODY_SENSORS" />
  <uses-permission android:name="android.permission.CALL_PHONE" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.GET_ACCOUNTS" />
  <uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" />
  <uses-permission android:name="android.permission.READ_CALENDAR" />
  <uses-permission android:name="android.permission.READ_CALL_LOG" />
  <uses-permission android:name="android.permission.READ_CONTACTS" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.READ_PHONE_NUMBERS" />
  <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  <uses-permission android:name="android.permission.READ_SMS" />
  <uses-permission android:name="android.permission.RECEIVE_MMS" />
  <uses-permission android:name="android.permission.RECEIVE_SMS" />
  <uses-permission android:name="android.permission.RECEIVE_WAP_PUSH" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.SEND_SMS" />
  <uses-permission android:name="android.permission.USE_SIP" />
  <uses-permission android:name="android.permission.WRITE_CALENDAR" />
  <uses-permission android:name="android.permission.WRITE_CALL_LOG" />
  <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <uses-permission android:name="com.android.voicemail.permission.ADD_VOICEMAIL" />

  <!-- … -->

</manifest>

 

Javascript 소스

5. 권한 체크 소스

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

//1. 권한 체크
export const checkAllPermissions = async (os, dispatch) => {
    let chk = true;
    if (os === 'android') {
        await Promise.all([
            check(PERMISSIONS.ANDROID.CAMERA),
            check(PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE),
            check(PERMISSIONS.ANDROID.READ_CONTACTS),
            check(PERMISSIONS.ANDROID.CALL_PHONE),
            check(PERMISSIONS.ANDROID.ANSWER_PHONE_CALLS),
            check(PERMISSIONS.ANDROID.RECORD_AUDIO),
        ])
            .then(data => {
                console.log('check permissions(android)', data);
                data.map(value => {
                    if (value !== 'granted') {
                        if (value !== 'blocked') {
                            chk = false;
                        }
                    }
                });
            })
            .catch(e => {
                console.log(e);
            })
            .finally(() => {
                dispatch(setPermissionChk(chk)); //체크상태 저장
            });
    } else {
        await Promise.all([
            check(PERMISSIONS.IOS.CAMERA),
            check(PERMISSIONS.IOS.PHOTO_LIBRARY),
            check(PERMISSIONS.IOS.CONTACTS),
            check(PERMISSIONS.IOS.MICROPHONE),
            check(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY),
        ])
            .then(data => {
                console.log('check permissions(ios) result : ', data);
                // console.log('data[3] (APP_TRACKING_TRANSPARENCY) : ', data[3]);
                data.map(value => {
                    if (value !== 'granted') {
                        if (value !== 'blocked' && value !== 'unavailable') {
                            chk = false;
                        }
                    }
                });
            })
            .catch(e => {
                console.log(e);
            })
            .finally(() => {
                console.log('chk', chk);
                dispatch(setPermissionChk(chk)); //체크상태 저장
            });
    }
    return chk;
};

 

6. 권한 요청 소스 

//2. android 모든 권한 요청
export const requestAndroidPermissionsChk = async dispatch => {
    //권한 요청
    requestMultiple([
        PERMISSIONS.ANDROID.CAMERA,
        PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE,
        PERMISSIONS.ANDROID.READ_CONTACTS,
        PERMISSIONS.ANDROID.CALL_PHONE,
        PERMISSIONS.ANDROID.ANSWER_PHONE_CALLS,
        PERMISSIONS.ANDROID.RECORD_AUDIO,
    ]).then(data => {
        console.log('request permissions(aos) result : ', data);
        dispatch(setPermissionChk(true));
    });
};

//3. iOS 모든 권한 요청
export const requestiOSPermissionsChk = async dispatch => {
    requestMultiple([
        PERMISSIONS.IOS.CAMERA,
        PERMISSIONS.IOS.PHOTO_LIBRARY,
        PERMISSIONS.IOS.CONTACTS,
        PERMISSIONS.IOS.MICROPHONE,
    ]).then(data => {
        console.log('request permissions(ios)', data);
        dispatch(setPermissionChk(true));
    });
};

 

 

7. 권한 체크 사용 소스

const permissionCheck = async () => {
    await checkAllPermissions(Platform.OS, dispatch);
};


UseEffect(() => {
	permissionCheck().then()
}, []);

 

8. 권한 요청 사용 소스

const confirm = useCallback(async () => {
    new Promise(resolve => {
        if (Platform.OS === 'android') {
            requestAndroidPermissionsChk(dispatch).then();
        } else {
            requestiOSPermissionsChk(dispatch).then();
        }
        return resolve;
    }).then();
}, [dispatch]);