[M1 맥북] react-native-permissions IOS 세팅하는 법

안녕하세요 VeriLog입니다.

 

요즘에 IOS 앱 개발을 하는 중인데요. 개발 중에 많은 어려움을 겪었던 react-native-permission 세팅하는 법에 대해서 포스팅 하려고 합니다.

 

처음에는 블로그에 나와있는대로 세팅을 했었는데, 계속해서 오류가 나서 공식 홈페이지에 나와있는대로 세팅하고 성공했습니다.

https://www.npmjs.com/package/react-native-permissions

react-native-permissions

 

1. package.json 파일에 react-native-permission 추가

 - pakage.json 파일을 열어서 react-native-permission을 추가해주세요.

 - 저는 3.8.0 버전을 사용했습니다.

 - 이후에, 아래에 있는 reactNativePermissionsIOS를 추가해주세요. (사용하실 것들만 남겨두고 나머지는 지우셔도 됩니다.)

{
  "reactNativePermissionsIOS": [
    "AppTrackingTransparency",
    "BluetoothPeripheral",
    "Calendars",
    "Camera",
    "Contacts",
    "FaceID",
    "LocationAccuracy",
    "LocationAlways",
    "LocationWhenInUse",
    "MediaLibrary",
    "Microphone",
    "Motion",
    "Notifications",
    "PhotoLibrary",
    "PhotoLibraryAddOnly",
    "Reminders",
    "Siri",
    "SpeechRecognition",
    "StoreKit"
  ],

 

 - 제가 세팅한 환경은 다음과 같습니다.

"dependencies": {

"@bam.tech/react-native-image-resizer": "^3.0.5",

"@react-native-firebase/app": "^17.4.1",

"@react-native-firebase/auth": "^17.4.1",

"@react-native-firebase/firestore": "^17.4.1",

"@react-native-firebase/functions": "^17.4.1",

"@react-native-firebase/storage": "^17.4.1",

"@react-native-firebase/messaging": "^17.4.1",

"@react-native-google-signin/google-signin": "^9.0.2",

"@react-native-seoul/kakao-login": "^5.2.6",

"@react-native-seoul/naver-login": "^3.0.0-rc.1",

"@react-navigation/bottom-tabs": "^6.5.4",

"@react-navigation/material-top-tabs": "^6.5.3",

"@react-navigation/native": "^6.1.3",

"@react-navigation/native-stack": "^6.9.9",

"@types/react-native-vector-icons": "^6.4.13",

"@notifee/react-native": "^7.6.1",

"moment": "^2.29.4",

"react": "17.0.2",

"react-native": "0.67.5",

"react-native-fast-image": "^8.6.3",

"react-native-image-crop-picker": "^0.39.0",

"react-native-permissions": "^3.8.0",

"react-native-modal": "^13.0.1",

"react-native-pager-view": "^6.1.2",

"react-native-paper": "^5.2.0",

"react-native-safe-area-context": "^4.5.0",

"react-native-screens": "^3.19.0",

"react-native-vector-icons": "^9.2.0",

"recoil": "^0.7.6"

},

"reactNativePermissionsIOS": [

"AppTrackingTransparency",

"Camera",

"Notifications",

"PhotoLibrary",

"PhotoLibraryAddOnly"

],

 

2. package.json 파일 "scripts"에 "postinstall" 추가

 - package.json 파일을 보면 "scripts"라고 되어 있는 부분이 있습니다. 거기에 "postinstall" 부분을 추가해주세요.

 - 추가하게 되면, 따로 pod install을 안해도 npm install만 수행하면 자동으로 pod install 까지 해줍니다. 

"scripts": {

"android": "react-native run-android",

"ios": "react-native run-ios --simulator='iPhone 14'",

"start": "react-native start",

"test": "jest",

"lint": "eslint .",

"postinstall": "react-native setup-ios-permissions && pod-install"

},

 

3. Podfile 수정

 - Podfile은 따로 수정 안하셔도 됩니다!

- 다른 블로그를 보니 Podfile에서 설정하도록 되어 있는데, 그 부분은 이제 안하셔도 됩니다.

 

4. ios > 프로젝트명 > info.plist 추가

 - info.plist 파일에 사용하실 부분만 추가하시면 됩니다.

<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>

 

5. node_modules 폴더 삭제 & npm i

 - 기존에 설치되어 있는 node_modules 폴더를 지우신 후, npm i 또는 npm install 명령어로 다시 설치하시면 됩니다.

- npm 설치 후, 자동으로 pod install까지 수행되게 됩니다.

 

6. npm run ios

 - npm run ios를 실행해보시면 제대로 돌아가는 것을 확인하실 수 있습니다.

 

다들 오류 잘 해결하시길 바라겠습니다.