React native 0.59 + SDK 28(+AndroidX)로 업그레이드하면서 발생한 문제
0. 환경
(개발)
- react-native 0.54 -> 0.59
- react 16.3
- mobx-react 5.1 -> 5.4
- mobx 4.3 -> 5.9
- babel ? -> 7
- babel-jest 24.3 -> 24.9
- sdk 26 -> 28
- android build tool 26 -> 28
- gradle 4.4 -> 4.10
- gradle build tool 3.1 -> 3.3
- google services 4.0 -> 4.2
- 64bit architecture 추가
- firebase-core 16 -> firebase-core 17
- react-native-google-signin 1.0 -> react-native-google-signin 2.0
(테스트)
- android 8
- galaxy s8
1. 상황
잘 돌아가고 있던 프로젝트를 다시 실행했더니 빌드가 안된다. 찾아보니 패키지 버전 문제인 것 같아서 버전을 전체적으로 올리기로 결정.
2. sdk 버전 업
1) "Manifest merger failed : Attribute application@appComponentFactory..." 에러 발생
https://cishome.tistory.com/108 를 참조해서 gradles.properties에 아래 코드를 추가했다.
android.useAndroidX=true
android.enableJetifier=true
2) "cannot find symbol ..." 에러 발생
sdk 버전을 올리면서 android.으로 시작하는 패키지가 androidx.로 바뀌어서 못찾아오는 걸로 추정된다.(https://github.com/invertase/react-native-firebase/issues/2332 참조)
이걸 자동으로 해주는게 jetifier라는데 react native에서는 적용이 안되는 것 같다.
3) react-native-jetifier 패키지 설치
https://github.com/jumpn/react-native-jetifier 이 페이지를 참조해서 설치 후 실행하면 cannot find symbol 에러는 발생하지 않는다.
3. dex 최대치 초과 문제
1) "The number of method references in a .dex file cannot exceed 64k" 에러 발생
multidex용 앱으로 설정하면 된다고 한다. https://stackoverflow.com/questions/44140496/how-do-i-enable-multidex-for-react-native 이 페이지를 참조해서 설정하면 dex 문제는 발생하지 않는다.
min sdk가 21 이상이면 따로 설정하지 않아도 된다고 한다.
4. babel 버전 문제
1) "The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean" 에러 발생
일단 decorator는 mobx에서 사용한다.
다른 패키지를 업그레이드하면서 babel 버전도 같이 올라간 것 같은데 package.json에 이전 버전 패키지들이 남아있고, 같이 설치되어서 발생한 문제인 것 같다.
babel 관련 패키지를 다 지우고 아래처럼 설정했다.
(package.json)
"dependencies": {
...
"@babel/plugin-proposal-class-properties": "^7.7.0",
"@babel/plugin-proposal-decorators": "^7.7.0",
...
},
"devDependencies": {
...
"@babel/core": "^7.7.2",
"@babel/runtime": "^7.7.2",
"babel-jest": "24.9.0",
"babel-preset-react-native": "5.0.2",
"jest": "24.9.0",
"metro-react-native-babel-preset": "^0.57.0",
"react-test-renderer": "16.8.6"
...
},
"jest": {
"preset": "react-native"
}
(.babelrc)
"presets": [
"module:metro-react-native-babel-preset"
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}]
]
5. "_this._registerevents is not a function" 에러
https://github.com/facebook/react-native/issues/21094 이 페이지를 참조.
react-native start --reset-cache를 하니 해결되었다.
6. http 문제(191204 추가)
실 기기가 android 8이라 확인하지 못했는데 android 9.0 이상의 기기에서 구글 로그인이 안되는 문제가 발생했다.
정확히는 구글 로그인 후 서버(개발중인 api 서버)와 통신이 안돼서 다음 페이지로 넘어가지 못하는 문제였다.
에러 메시지는 "communication to not permitted by network security policy"
android studio logcat에서는 안보이고 react native 로그에서 발견했다(react-native log-android)
android 9.0부터는 http로 request를 보내는 걸 막기 때문이라고 한다.
https://gun0912.tistory.com/80 이 페이지를 참고하여 AndroidManifest의 <application... 부분에 android:usesCleartextTraffic="true"를 추가하여 해결했다.
7. 기타
1) firebase-core 버전 업
firebase-core를 17.0으로 올리고 firebase관련 라이브러리(com.google.firebase:firebase-xxx)도 같이 올렸다.
올린 버전은 https://firebase.google.com/docs/android/setup?authuser=0#available-libraries 이 페이지 참조.
firebase-messaging 18.0.0 에서 firebase-iid 18.0.0을 사용해야 되는데 19.0을 가져와서 뭔가 에러가 발생했다.
아래와 같이 수정해서 해결했다.
...
implementation ("com.google.firebase:firebase-messaging:18.0.0") {
exclude group: 'com.google.firebase', module: 'firebase-iid'
}
implementation 'com.google.firebase:firebase-iid:18.0.0'
...
2) react-native-google-signin 버전 업
react-native-google-signin을 1.0 -> 2.0으로 올렸더니 로그인이 안되는 문제가 발생했다.
정확히는 1.0에서는 GoogleSignin.configure() 함수가 성공시 리턴 값이 있었고, 이걸 체크해서 실제 로그인하는 함수로 넘어갔는데
2.0에서는 아무것도 리턴하지 않으면서 실제 로그인 함수로 넘어가지 못하는 문제였다.
또한 기존에 로그인된 사용자를 가져오는 함수 이름이 currentUserAsync에서 getCurrentUser로 변경되어 매 번 로그인해야 하는 문제도 발생했었다.