일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- debounce
- react native
- React-Native업데이트
- hydration mismatch
- promise.all
- Hash-table
- Promise
- RN새로운아키텍쳐
- rn
- axios
- react animation
- ios
- Throttle
- named type
- no-permission-handler-detected
- react
- 비동기
- motion.div
- RN아키텍쳐
- react-native-permissions
- react-native
- animation
- await
- javascript
- Swift
- react-native-image-picker
- CS
- private-access-to-photos
- async
- RN업데이트
- Today
- Total
하루살이 개발일지
[React-Native] react-native-permissions 라이브러리 No permission handler detected 에러 해결 방법 (iOS) 본문
[React-Native] react-native-permissions 라이브러리 No permission handler detected 에러 해결 방법 (iOS)
harusari 2024. 3. 22. 02:021. 사용 동기
앱 개발 도중 react-native-image-picker 라이브러리를 활용해 유저가 앨범에서 사진을 업로드하는 기능을 개발하던 도중, iOS에서 앨범에 접근할 수 있는 권한이 없어 유저에게 권한 요청 하는 기능이 필요했음
(iOS에서 비공개 접근(private access to photos)밖에 할 수가 없었다.. 구체적인 내용 보러가기)
2. 에러 내용
No permission handler detected 에러가 계속 발생함.
어라? 난 분명 react-native-permissions 라이브러리 설치 후 pod install 까지 제대로 했는데..
Info.plist에 NSPhotoLibraryUsageDescription 도 잘 작성해 주었는데..
3. 해결 방법
저 에러 세번째 줄을 자세히 읽어보면 If you use 'use_frameworks!', follow the workaround guide in the project README. 라고 적혀 있다.
ios 폴더 내부 Podfile에 use_frameworks!를 사용하는지 확인해 보았는데,
사용하고 있었다.
그다음 저 workaround guide를 확인해 보았더니 Podfile에 설정 스크립트가 필요하다고 한다.
# with react-native >= 0.72
- # Resolve react_native_pods.rb with node to allow for hoisting
- require Pod::Executable.execute_command('node', ['-p',
- 'require.resolve(
- "react-native/scripts/react_native_pods.rb",
- {paths: [process.argv[1]]},
- )', __dir__]).strip
+ def node_require(script)
+ # Resolve script with node to allow for hoisting
+ 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')
-로 된 부분을 삭제하고, +로 된 부분을 추가하면 된다.
이렇게.
그 다음, 저 prepare_react.. 코드 아래줄에 permission이 필요한 기능을 적어주면 된다.
# …
platform :ios, min_ios_version_supported
prepare_react_native_project!
# ⬇️ uncomment wanted permissions
setup_permissions([
# 'AppTrackingTransparency',
# 'Bluetooth',
# 'Calendars',
# 'CalendarsWriteOnly',
# 'Camera',
# 'Contacts',
# 'FaceID',
# 'LocationAccuracy',
# 'LocationAlways',
# 'LocationWhenInUse',
# 'MediaLibrary',
# 'Microphone',
# 'Motion',
# 'Notifications',
# 'PhotoLibrary',
# 'PhotoLibraryAddOnly',
# 'Reminders',
# 'Siri',
# 'SpeechRecognition',
# 'StoreKit',
])
# …
나같은 경우는 PhotoLibrary만 일단 필요했기 때문에 그것만 가져왔다.
Info.plist는 이미 추가해주었기 때문에 패스.
4. 마무리
이후 permission을 부여하는 코드를 작성하였다.
useEffect(() => {
const checkPermission = async () => {
const res = await checkMultiple([PERMISSIONS.IOS.PHOTO_LIBRARY]);
if (res['ios.permission.PHOTO_LIBRARY'] === 'denied') {
const req = await requestMultiple([PERMISSIONS.IOS.PHOTO_LIBRARY]);
}
};
checkPermission();
}, []);
유저의 권한을 체크한 뒤, 만약 권한이 거절됨(denied)이면, 권한을 요청하는 방식의 코드이다.
그런데, 여전히 위의 No permission handler detected 에러가 발생하였다.
이는 빌드 기록이 남아있기 때문일 것이라 추측, Xcode에서 빌드 기록을 삭제해 주었다.
Product > Clean Build Folder 후 다시 pod install 후 재빌드하니 No permission handler detected 에러가 해결된 것을 볼 수 있었다.
'프로젝트 > Rizzup' 카테고리의 다른 글
[회고] TextInput 입력을 두 줄로 제한하기 - 인스타그램 설문 기능 (0) | 2024.03.28 |
---|---|
[React-Native] 사진에 비공개 접근 (private access to photos) 해결 방법 / react-native-permissions (0) | 2024.03.22 |