React native tab view error :A props object containing a “key” prop is being spread into JSX

Hi i have got this error when i tried react native lates version with react naitve tab view

this patch fixed this issue

diff –git a/node_modules/react-native-tab-view/src/TabBar.tsx b/node_modules/react-native-tab-view/src/TabBar.tsx
index e8d0b4c…


This content originally appeared on DEV Community and was authored by Rahul Chandra

Hi i have got this error when i tried react native lates version with react naitve tab view

this patch fixed this issue

diff --git a/node_modules/react-native-tab-view/src/TabBar.tsx b/node_modules/react-native-tab-view/src/TabBar.tsx
index e8d0b4c..1c3c09f 100644
--- a/node_modules/react-native-tab-view/src/TabBar.tsx
+++ b/node_modules/react-native-tab-view/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} />
           )}
         </>
       );


This content originally appeared on DEV Community and was authored by Rahul Chandra


Print Share Comment Cite Upload Translate Updates
APA

Rahul Chandra | Sciencx (2024-09-12T07:37:29+00:00) React native tab view error :A props object containing a “key” prop is being spread into JSX. Retrieved from https://www.scien.cx/2024/09/12/react-native-tab-view-error-a-props-object-containing-a-key-prop-is-being-spread-into-jsx/

MLA
" » React native tab view error :A props object containing a “key” prop is being spread into JSX." Rahul Chandra | Sciencx - Thursday September 12, 2024, https://www.scien.cx/2024/09/12/react-native-tab-view-error-a-props-object-containing-a-key-prop-is-being-spread-into-jsx/
HARVARD
Rahul Chandra | Sciencx Thursday September 12, 2024 » React native tab view error :A props object containing a “key” prop is being spread into JSX., viewed ,<https://www.scien.cx/2024/09/12/react-native-tab-view-error-a-props-object-containing-a-key-prop-is-being-spread-into-jsx/>
VANCOUVER
Rahul Chandra | Sciencx - » React native tab view error :A props object containing a “key” prop is being spread into JSX. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/12/react-native-tab-view-error-a-props-object-containing-a-key-prop-is-being-spread-into-jsx/
CHICAGO
" » React native tab view error :A props object containing a “key” prop is being spread into JSX." Rahul Chandra | Sciencx - Accessed . https://www.scien.cx/2024/09/12/react-native-tab-view-error-a-props-object-containing-a-key-prop-is-being-spread-into-jsx/
IEEE
" » React native tab view error :A props object containing a “key” prop is being spread into JSX." Rahul Chandra | Sciencx [Online]. Available: https://www.scien.cx/2024/09/12/react-native-tab-view-error-a-props-object-containing-a-key-prop-is-being-spread-into-jsx/. [Accessed: ]
rf:citation
» React native tab view error :A props object containing a “key” prop is being spread into JSX | Rahul Chandra | Sciencx | https://www.scien.cx/2024/09/12/react-native-tab-view-error-a-props-object-containing-a-key-prop-is-being-spread-into-jsx/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.