개요
이전에는 잘 돌아가던 코드에서 제목과 같은 에러가 뜨기 시작했다. 역시나 테플 배포를 하니 위 에러 때문인지 앱 충돌이 난다는 문구가 뜨며 앱이 꺼졌다.
에러를 찾아보니 생각보다 잘 안나와서 정리해보려고 한다.
문제점
에러가 나는 화면에서 @react-navigation/material-top-tabs를 사용하고 있었는데 이게 문제를 일으켰다.
//에러 문구
let props = {key: someKey, position: ...,
route: ..., navigationState: ..., getAccessibilityLabel: ..., getAccessible: ...,
getLabelText: ..., getTestID: ..., renderBadge: ..., renderIcon: ..., renderLabel: ..., activeColor: ...,
inactiveColor: ..., pressColor: ..., pressOpacity: ..., onLayout: ..., onPress: ..., onLongPress: ...,
labelStyle: ..., style: ..., defaultTabWidth: ...,
android_ripple: ...};
<TabBarItem {...props} />
React keys must be passed directly to JSX without using spread:
let props = {position: ..., route: ...,
navigationState: ..., getAccessibilityLabel: ...,
getAccessible: ..., getLabelText: ..., getTestID: ..., renderBadge: ..., renderIcon: ..., renderLabel: ...,
activeColor: ..., inactiveColor: ..., pressColor: ..., pressOpacity: ..., onLayout: ..., onPress: ...,
onLongPress: ..., labelStyle: ..., style: ...,
defaultTabWidth: ..., android_ripple: ...};
<TabBarItem key={someKey} {...props} />
...이것 이상으로 길 게 나왔는데 에러 문구를 보면 react에서 key를 직접 전달하지 않고 spread에 포함하여 전달해 문제를 일으킨다고 나와있다. 그런데 내 코드에서는 그런 부분이 없어 뭐지..? 했는데 TabBarItem이라는 것을 보고 @react-navigation/material-top-tabs가 문제구나 하여 검색을 해보았다.
https://mk-develop.tistory.com/27
위 링크에 나와 같은 에러가 나타나는 분이 계셨는데 저 분이 해결한 방법으로는 나는 해결이 안됐다.
그래서 더 검색해보던 중, 약 세 달 전, 4.0 버전에서 버그가 해결됐다는 글을 보았다.
(@react-navigation/material-top-tabs는 react-native-tab-view 및 react-native-pager-view 패키지에 의존하고 있다.)
그래서 react-native-tab-view를 4.0으로 upgrade해주고 다시 build 후 배포하니 정상적으로 작동했다!
//upgrade code
npm install react-native-tab-view@4.0.5참고로 RN expo로 개발하고 있고 ios 배포를 원한다면
//root folder
npx expo prebuild
cd ios
//ios folder
pod install터미널에서 위 코드를 실행해줘야 정상 작동한다.
1분 정리
react-native-tab-view를 4.0으로 upgrade해라.
//upgrade code
npm install react-native-tab-view@4.0.5++ 추가 발견된 문제점 ..
https://stackoverflow.com/questions/79175954/material-top-tabs-label-not-showing
위 링크를 타고 들어가면 알 수 있지만 4.0 이상의 버전이 @react-navigation/material-top-tabs과 호환이 되지 않아 뜨지 않는다 ... 그래서 우선 다시 다운그레이드를 해야하는 상황.
3.5.2 버전이 그래도 이전 버전보단 높아서 그런지 이전에 발생되던 문제는 사라진 상태라 다운그레이드하자 전부 해결됐다 !
