[RN] Warning: A props object containing a "key" prop is being spread into JSX 에러

개요

---

프로젝트를 진행하던 중 의문의 에러가 발생했다.
React-Native의 Material-Top-Tab-Navigation이 있는 컴포넌트에 들어가면 해당 에러가 발생했다.
 

경고(에러)

콘솔

단순한 경고라고 생각하고 넘어갈 수도 있지만 콘솔에는 ERROR로 출력되는 모습이다.
 
나중에 앱 빌드할 때 문제가 될 수 있으니 해결하고 넘어가려 했다.

---

해결 방법

---

24년 5월 8일 공식 라이브러리의 issue에서 에러 해결법을 찾을 수 있었다.
 
https://github.com/react-navigation/react-navigation/issues/11989

A props object containing a "key" prop is being spread into JSX · Issue #11989 · react-navigation/react-navigation

 
해당 페이지에서 에러 해결 패치 파일 내용을 공유중이었다.
 
패치 파일은 다음과 같다.

diff --git a/src/TabBar.tsx b/src/TabBar.tsx
index e8d0b4c8dcbbe779fcd304f483d2d91c2d5e8dde..203adc927db153df3f8472d4ec67346e1cd7405b 100644
--- a/src/TabBar.tsx
+++ b/src/TabBar.tsx
@@ -364,8 +364,7 @@ export function TabBar<T extends Route>({
 
   const renderItem = React.useCallback(
     ({ item: route, index }: ListRenderItemInfo<T>) => {
-      const props: TabBarItemProps<T> & { key: string } = {
-        key: route.key,
+      const props: TabBarItemProps<T> = {
         position: position,
         route: route,
         navigationState: navigationState,
@@ -446,9 +445,9 @@ export function TabBar<T extends Route>({
         <>
           {gap > 0 && index > 0 ? <Separator width={gap} /> : null}
           {renderTabBarItem ? (
-            renderTabBarItem(props)
+            renderTabBarItem({key: route.key, ...props})
           ) : (
-            <TabBarItem {...props} />
+            <TabBarItem key={route.key} {...props} />
           )}
         </>
       );

 
해당 패치 파일을 그대로 적용해도 되고, 직접 해당 파일로 가서 수정해도 된다.
 
node_modules/react-native-tab-view/src/TabBar.tsx 로 이동한다.
 
367, 368 line을 다음과 같이 수정한다.
 

const props: TabBarItemProps<T> = {
//key: route.key, 이거 주석처리 하거나 삭제

 
그 후 renderItem 함수의 return값을 다음과 같이 수정한다.

<>
       {gap > 0 && index > 0 ? <Separator width={gap} /> : null}
       {renderTabBarItem ? (
         renderTabBarItem({key: route.key, ...props})
       ) : (
         <TabBarItem key={route.key} {...props} />
       )}
</>