A props object containing a "key" prop is being spread into JSX #11989

KrisLau · 2024-05-15T21:35:39Z

Current behavior

Every time I load my app, after updating a bunch of my packages (of note: react-native, expo), I get this error:

Warning: A props object containing a "key" prop is being spread into JSX:
  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} />
    in CellRenderer (created by VirtualizedList)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by VirtualizedList)
    in VirtualizedListContextProvider (created by VirtualizedList)
    in VirtualizedList (created by FlatList)
    in FlatList (created by Animated(Anonymous))
    in Animated(Anonymous) (created by TabBar)
    in RCTView (created by View)
    in View (created by TabBar)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by TabBar)
    in TabBar (created by PagerViewAdapter)
    in PagerViewAdapter (created by TabView)
    in RCTView (created by View)
    in View (created by TabView)
    in TabView (created by TeamHome)
    in TeamHome (created by withObservables[teamTypeID,roles] { teamType, resources, roleAccess })
    in withObservables[teamTypeID,roles] { teamType, resources, roleAccess }
    in Unknown
    in Unknown (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by TeamStack)
    in TeamStack (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenNavigationContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RCTView (created by View)
    in View (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by TabStack)
    in TabStack (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by RootNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by RootNavigator)
    in RootNavigator (created by withObservables[] { teams })
    in withObservables[] { teams } (created by App)
    in WalkupDJProvider (created
8000
 by withObservables[teamID,audioType] { djWalkup, audio })
    in withObservables[teamID,audioType] { djWalkup, audio } (created by withObservables[] { audioType })
    in withObservables[] { audioType }
    in Unknown
    in Unknown (created by App)
    in CurrentTeamProvider (created by App)
    in AuthProvider (created by App)
    in ConnectionProvider (created by App)
    in UserProvider (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in RCTView (created by View)
    in View (created by MenuProvider)
    in RCTView (created by View)
    in View (created by MenuProvider)
    in MenuProvider (created by App)
    in ThemeProvider (created by App)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by App)
    in NotificationProvider (created by App)
    in SyncProvider (created by App)
    in DatabaseProvider (created by App)
    in ErrorBoundary (created by App)
    in App (created by RootApp)
    in ReactNativeProfiler (created by RootApp)
    in RCTView (created by View)
    in View (created by __Sentry.TouchEventBoundary)
    in __Sentry.TouchEventBoundary (created by RootApp)
    in RootApp
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in Prototype(RootComponent)

Code:

<TabView
  swipeEnabled={false}
  initialLayout={initialLayout}
  navigationState={{index, routes}}
  onIndexChange={setIndex}
  renderTabBar={renderTabBar}
  renderScene={renderScene}
/>

const renderTabBar = props => (
    <TabBar
      {...props}
      scrollEnabled
      activeColor={'red'}
      inactiveColor={'grey'}
      tabStyle={styles.tabBar}
      labelStyle={styles.tabBarLabel}
      indicatorContainerStyle={styles.tabIndicatorContainer}
      indicatorStyle={styles.indicator}
      style={{backgroundColor: Colors.WHITE, elevation: 0}}
    />
);

When i add renderTabBarItem={() => {}}, the error disappears so I tried to change the <TabBarItem {...props} /> to <TabBarItem key={props.key} {...props} /> in node_modules/react-native-tab-view/src/TabBar.tsx but the error did not disappear.

Expected behavior

No error

Reproduction

Doesn't show up on snack but I modified this snack to match my code: https://snack.expo.dev/UtHfj87TmrjuCkct-fB9z

Platform

Packages

Environment

I've removed the packages that I don't use

package	version
react-native-tab-view	3.5.2

The text was updated successfully, but these errors were encountered:

github-actions · 2024-05-15T21:35:52Z

Hey @KrisLau! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro.

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

Expo Snack
TypeScript Playground
GitHub repo under your username

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a repro.

github-actions · 2024-05-15T21:35:52Z

Couldn't find version numbers for the following packages in the issue:

@react-navigation/native
react-native-tab-view
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-top-tabs
@react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

github-actions · 2024-05-15T21:37:56Z

Couldn't find version numbers for the following packages in the issue:

@react-navigation/native

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

KrisLau · 2024-05-15T23:44:13Z

@satya164 Fixed it by moving the key out of the props. My patch file from yarn:

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} />
           )}
         </>
       );

antoniogoulao · 2024-05-17T15:19:58Z

Hi @KrisLau, which version of react are you using? "react": "18.3.0" gives me these errors but I don't have them with "react": "18.2.0". It's related to facebook/react#25697 after checking release notes https://github.com/facebook/react/releases/tag/v18.3.0

In my case for "@react-navigation/material-top-tabs": "6.6.13" the file MaterialTopabView.tsx is where the source of the error is:

  return (
    <TabView<Route<string>>
      {...rest}

This version should have a peerDependency "react": "<=18.2.0" as it will crash any Android release build (in my case) if the version is higher.

antonandreyev · 2024-05-20T07:19:36Z

Yes, the warning appears with React 18.3.x. There is no crash for me and the React crew is promising that there is no changes apart of new deprecation warnings

KrisLau · 2024-05-21T10:26:15Z

@antoniogoulao I'm using v18.3.1. My Android builds are running fine on it but I'll make sure to keep an eye out for issues with it! My upgraded version is still sitting on a separate branch because I'm testing all the packages I upgraded haha.

linusrush · 2024-05-23T10:47:59Z

Same issue here. Started happening after upgrading to v18.3.1

maybe the Solution given by @KrisLau could be implemented soon?

KrisLau · 2024-05-24T15:32:09Z

@linusrush you can use patch-package or yarn's built in patching to patch it in your project if you need it urgently

Willham12 · 2024-05-31T06:58:59Z

+1 and thanks for the patch @KrisLau

denysoleksiienko · 2024-07-17T13:33:40Z

same error. will this be fixed?

scosmanagraz · 2024-07-17T16:05:45Z

same error. will this be fixed?

At the time of writing, no. Apply this patch.

react-navigation/react-navigation#11989 (comment)

lmahoudeau · 2024-08-09T09:16:11Z

Hi, after upgrading to 0.75.0-rc.7 from 0.74.4, I came accross this issue.
Platform: Android,
Dev environment set on Windows 11
Then, after applying the patch stated in this ticket, my app is crashing without any warnings or errors, it just closes the app.

"react": "18.3.1",
"react-native": "0.75.0-rc.7",
"@react-navigation/drawer": "^6.7.2",
"@react-navigation/native": "^6.1.18",
"@react-navigation/stack": "^6.4.1",
"react-native-pager-view": "^6.3.3", patched after react-native upgrade
"react-native-safe-area-context": "^4.10.8", patched after react-native upgrade
"react-native-tab-view": "^3.5.2", patched according to this post

could you help ?

RoyRao2333 · 2024-08-16T08:22:23Z

Same on react-native@0.75.1. Waiting for an official fix. :)

gatra1122 · 2024-08-18T17:08:36Z

i encounter the same problem with @react-navigation/material-top-tabs

natemartins · 2024-08-19T12:15:46Z

I encountered the same issue. Applying the patches did not work for me. I guess the better option is to downgrade to react 18.2.0 if you are on ^18.3.1 pending when the issue has been resolved by React or React Navigation, whichever comes first.

ShivamPhilips · 2024-08-19T18:17:22Z

Got the same issue when upgrading to react native 0.75.1, still crashes for android tried with patch and older version of react

natemartins · 2024-08-20T06:48:29Z

Got the same issue when upgrading to react native 0.75.1, still crashes for android tried with patch and older version of react

Oh! I had to downgrade from react native 0.75 to 0.74. You might want to try that.

AyoCodess · 2024-08-20T21:16:31Z

@satya164 Fixed it by moving the key out of the props. My patch file from yarn:

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} />
           )}
         </>
       );

how do we name the patch file?

KrisLau · 2024-08-20T23:02:44Z

@AyoCodess not sure what exactly youre asking but look up the tutorials for https://github.com/ds300/patch-package or the yarn patch package

FernandoAOborges · 2024-08-22T12:54:50Z

Whoever needs the patch file, it’s here.
react-native-tab-view+3.5.2.patch

scosmanagraz · 2024-08-22T13:45:03Z

@AyoCodess You should be using yarn as your package manager for react-native projects. Follow the instructions here: https://yarnpkg.com/cli/patch to create a patch.

migueldaipre · 2024-08-22T13:56:47Z

Same on react-native@0.75.1. Waiting for an official fix. :)

Send a PR.

We would be happy to review.

Shariq512000 · 2024-10-27T19:04:43Z

Any Update???

Shariq512000 · 2024-10-27T19:08:10Z

i encounter the same problem with @react-navigation/material-top-tabs

omarsdev · 2024-11-01T13:32:07Z

The same problem on my side :(

Aamir0890 · 2024-11-02T06:54:07Z

getting the same error in android
Warning: A props object containing a "key" prop is being spread into JSX:
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} />

"dependencies": {
"@react-native-async-storage/async-storage": "1.21.0",
"@react-native-community/netinfo": "11.3.1",
"@react-native-firebase/app": "19.1.1",
"@react-navigation/bottom-tabs": "6.5.11",
"@react-navigation/drawer": "6.6.6",
"@react-navigation/native": "6.1.9",
"@react-navigation/native-stack": "6.9.17",
"@react-navigation/stack": "6.3.20",
"@sentry/react-native": "5.19.3",
"axios": "1.6.8",
"lottie-ios": "3.1.8",
"lottie-react-native": "6.5.1",
"metro": "0.80.1",
"mixpanel-react-native": "3.0.7",
"react": "18.3.1",
"react-native": "0.76.0",
"react-native-blob-util": "0.19.11",
"react-native-element-dropdown": "2.10.1",
"react-native-encrypted-storage": "^4.0.3",
"react-native-file-viewer": "^2.1.5",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.20.2",
"react-native-heroicons": "^4.0.0",
"react-native-onesignal": "^5.2.5",
"react-native-pager-view": "^6.4.1",
"react-native-permissions": "^5.0.2",
"react-native-pull-to-refresh": "^2.1.3",
"react-native-reanimated": "3.16.1",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^4.12.0",
"react-native-screens": "^3.35.0",
"react-native-sensitive-info": "^5.5.8",
"react-native-share": "^11.0.4",
"react-native-svg": "^15.8.0",
"react-native-svg-transformer": "^1.5.0",
"react-native-tab-view": "^3.5.2",
"react-native-webview": "^13.12.3"
}

const renderScene = ({ route }) => {
switch (route.key) {
case "first":
return ;
default:
return null;
}
};
const [routes] = React.useState([
{ key: "first", title: "Your Recent Tests" },
]);

<TabView
navigationState={{ index,routes }}
renderScene={renderScene}
> initialLayout={{ width: layout.width }}
animationEnabled={false}
style={{
width: "100%",
backgroundColor: "#f8f7fc",
borderRadius: wp(2.5),
height: hp(40),
// borderWidth: wp(1),
}}
renderTabBar={renderTabBar}
initialParams={{ det }}
>

const renderTabBar = (props) => (

<TabBar
{...props}
indicatorStyle={{ backgroundColor: "#E9E8EB" }}
style={{
backgroundColor: "#E9E8EB",
elevation: 0,
padding: 0,
width: "100%",
}}
renderLabel={(route) => (
<View

    style={{
      width: wp(40),
      height: hp(4.5),
      borderRadius: wp(2),
      borderColor: "rgba(1, 129, 140, 0.3)",
      flexDirection:'row',
      alignItems:'center'
    }}
  >
    <Text
      style={{
        color: theme.grey,
        width: "100%",
        textAlign: "center",
        fontSize: wp(4),
      }}
    >
      {route.title}
    </Text>
  </View>
)}

/>
);

props: {
"position": 0,
"layout": {
"height": 323.6363525390625,
"width": 330.18182373046875
},
"navigationState": {
"index": 0,
"routes": [
{
"key": "first",
"title": "Your Recent Tests"
}
]
}
}

alainib · 2024-11-07T08:53:59Z

same error for us with

react native 0.76.1

bengxy · 2024-11-07T12:46:47Z

same error occurs
"@react-navigation/native": "^7.0.0"
"react": "18.3.1"

when using tutorial demo of dynamic navigation from https://reactnavigation.org/docs/hello-react-navigation#creating-a-native-stack-navigator

function RootStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

georgest · 2024-11-07T21:17:52Z

Any updates?

bengxy · 2024-11-08T02:42:20Z

same error occurs "@react-navigation/native": "^7.0.0" "react": "18.3.1"

when using tutorial demo of dynamic navigation from https://reactnavigation.org/docs/hello-react-navigation#creating-a-native-stack-navigator

function RootStack() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
);
}

After downgrade react from "react": "18.3.1" to "react": "18.2.0" by

# I'm using yarn. If you are using npm or npx, use related command 
yarn remove react
yarn add react@18.2.0

🤡 I Temporary solve the problem

The reason is: since "react": "18.3.0" see this change log , spreading key is not supported. change doc says it's a warning, however it may lead some other problems.

Downgrade is a temp solution to run code correctly, while it's better to make the lib compatible with newest react version.

Hope someone to solve the problem soon. (I'm a freshman of react so I have no idea why this happens)

mayconMello · 2024-11-14T15:48:40Z

@KrisLau I solved this issue by downgrading the React version from 18.3.1 to 18.2.0

pgHeadtler · 2024-11-20T12:00:29Z

getting same error while I am not using any TabBarItem

&platform=android&de…=hermes-stable:1086 Warning: A props object containing a "key" prop is being spread into JSX:
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} />
in CellRenderer (created by VirtualizedList)
in AndroidHorizontalScrollContentView (created by ScrollView)
in AndroidHorizontalScrollView
in HScrollViewNativeComponent (created by ScrollView)
in ScrollView (created by ScrollView)
in Wrapper (created by VirtualizedList)
in VirtualizedListContextProvider (created by VirtualizedList)
in VirtualizedList (created by FlatList)
in FlatList (created by Animated(Anonymous))
in Animated(Anonymous) (created by TabBar)
in RCTView (created by View)
in View (created by TabBar)
in RCTView (created by View)
in View (created by Animated(View))
in Animated(View) (created by TabBar)
in TabBar (created by TabBarTop)
in TabBarTop (created by PagerViewAdapter)
in PagerViewAdapter (created by TabView)
in RCTView (created by View)
in View (created by TabView)
in TabView (created by MaterialTopTabView)
in MaterialTopTabView (created by MaterialTopTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by MaterialTopTabNavigator)
in MaterialTopTabNavigator (created by MyLoadsTopTabs)
in MyLoadsTopTabs (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by Animated(Anonymous))
in Animated(Anonymous)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RCTView (created by View)
in View (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by MyBottomTabsForCompany)
in MyBottomTabsForCompany (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by Drawer)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by Drawer)
in RNSScreen (created by Animated(Anonymous))
in Animated(Anonymous)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by Drawer)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by Drawer)
in RCTView (created by View)
in View (created by Drawer)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by Drawer)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Drawer)
in Drawer (created by DrawerViewBase)
in DrawerViewBase (created by DrawerView)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by DrawerView)
in RCTView (created by View)
in View (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by DrawerView)
in DrawerView (created by DrawerNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by DrawerNavigator)
in DrawerNavigator (created by MyDrawer)
in MyDrawer (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View
in CardSheet (created by Card)
in RCTView (created by View)
in View (created by Animated(View))
in Animated(View) (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View (created by Animated(View))
in Animated(View) (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen (created by Animated(Anonymous))
in Animated(Anonymous)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in RCTView (created by View)
in View (created by Background)
in Background (created by CardStack)
in CardStack (created by HeaderShownContext)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by StackView)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by StackNavigator)
in StackNavigator (created by MyTabs)
in MyTabs (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in Provider (created by App)
in Theme (created by App)
in PortalProviderComponent (created by TamaguiProvider)
in Theme (created by ThemeProvider)
in ThemeProvider (created by TamaguiProvider)
in Provider (created by TamaguiProvider)
in UnmountedClassName (created by TamaguiProvider)
in TamaguiProvider (created by TamaguiProvider)
in TamaguiProvider (created by App)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by App)
in ChildrenWrapper (created by Root)
in _default (created by Root)
in Root (created by RootSiblingParent)
in RootSiblingParent (created by App)
in ApolloProvider (created by App)
in App (created by RootApp)
in ReactNativeProfiler (created by RootApp)
in RCTView (created by View)
in View (created by __Sentry.TouchEventBoundary)
in __Sentry.TouchEventBoundary (created by RootApp)
in RootApp (created by withDevTools(RootApp))
in withDevTools(RootApp)
in RCTView (created by View)
in View (created by AppContainer)
in ChildrenWrapper (created by Root)
in _default (created by Root)
in Root (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)

vadim-isakov · 2024-11-21T13:12:31Z

The bug has been fixed since react-native-tab-view 4.0.0!

gamy2 · 2024-11-26T18:08:29Z

open file package and add key={index} on renderItem function like that

until the package fix it

RoyalBosS-Ayush · 2024-12-04T06:47:18Z

open file package and add key={index} on renderItem function like that

until the package fix it

File path?

ledavto · 2024-12-24T10:36:44Z

Оф решений пока нет я так понимаю?

AyoCodess · 2024-12-25T21:04:49Z

This issue just reappeared for me too

abdulwahid211 · 2024-12-27T10:26:46Z

Has anyone done a fix for this issue?!

DominikSucharski · 2025-01-10T21:18:55Z

https://www.npmjs.com/package/patch-package#set-up
Create file patches/react-native-tab-view+3.5.2.patch

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

npm install

juanmigdr · 2025-01-23T23:47:19Z

I was having the same issue, it can be solved without applying a patch by extracting the key from the spread operator and passing it afterwards:

const renderTabBar = (props: TabBarProps<Route>) => (
  <TabBar
    {...props}
    renderTabBarItem={({ key, ...props }) => (
      <TabBarItem {...props} key={key} />
    )}
  />
);

Hope it helps!

abarmenkov · 2025-01-27T18:19:16Z

I was having the same issue, it can be solved without applying a patch by extracting the key from the spread operator and passing it afterwards:

const renderTabBar = (props: TabBarProps) => (
<TabBar
{...props}
renderTabBarItem={({ key, ...props }) => (
<TabBarItem {...props} key={key} />
)}
/>
);
Hope it helps!

Thanks a lot!!! it works

nathalia-rus · 2025-02-12T13:37:20Z

Any news on this? Even with that adjustment, there are under the hood other places where we end up with this error, and IRL navigation gets confused when navigating fast between different nav items. ( Android issue, iOS doesn't have that glitch from what I've tested.)

Merges the two tabs into a new tab "Sammlung", which has two top bar tabs for "Meine Wörter" and "Favoriten". - Add the material top tabs dependency - Create a patch for react-native-tab-view, because the 6.x.x versions are not properly supported anymore. More context: react-navigation/react-navigation#11989 (comment) - Remove the old favorites tab

juanclaudiopardo · 2025-05-08T21:36:47Z

any solution?

AyoCodess · 2025-05-09T08:44:34Z

this started showing up again in sdk53 latest version

symclouds · 2025-05-22T23:22:22Z

Hello, I was getting this issue in another package, which took me a few hours to figure out since it wasn't my code. There is a more generic way to solve this issue whenever this warning is thrown by the react-jsx-runtime irrespective of the package that actually causes it. In my case the package was react-native-snap-carousel. Here is the offending code:

 const props = this._needsScrollView() ? {
            key: keyExtractor ? keyExtractor(item, index) : this._getKeyExtractor(item, index)
        } : {};

...

return (
     <Component style={[mainDimension, slideStyle, animatedStyle]} pointerEvents={'box-none'} {...props}>
)

The issue is caused by props containing a key named 'key' being passed into react components via the spread operator ... as in the example shown above. The spread operator simply rolls out a json object into key=value syntax to be used as props by the receiving component. However, according to some research this may cause problems downstream if the component receiving the props doesn't handle it properly. Thus, when the framework detects a prop named 'key' being passed via spread syntax into a component, it throws this warning.

The way to fix the issue is to send the key prop by itself and remove the entry from the rest of the props so that they don't trigger the framework to throw the same warning. As the rest of the json entries are not problematic, we may continue to send them via spread once the offending key is removed. To fix the example above, you would write:

const props = this._needsScrollView() ? {
            key: keyExtractor ? keyExtractor(item, index) : this._getKeyExtractor(item, index)
        } : {};

...

let key = ('key' in props) ? props.key : null;
        if(key)
            delete props['key']


return (
     <Component style={[mainDimension, slideStyle, animatedStyle]} pointerEvents={'box-none'} key={key} {...props}>
)

After that you would want to patch the package to retain the changeset on future npm install. Hope it helps someone else.

KrisLau added the bug label May 15, 2024

github-actions bot added package:react-native-tab-view platform:ios labels May 15, 2024

github-actions bot added the needs repro label May 15, 2024

github-actions bot added repro provided and removed needs repro labels May 15, 2024

ibuki2003 added a commit to ibuki2003/pskey that referenced this issue Jul 24, 2024

build: patch react-native-tab-view

d3edb42

react-navigation/react-navigation#11989 (comment)

david-venhoff mentioned this issue Mar 4, 2025

Merge tabs "Meine Wörter" and "Favoriten" digitalfabrik/lunes-app#1062

Merged

Uh oh!

A props object containing a "key" prop is being spread into JSX #11989

A props object containing a "key" prop is being spread into JSX #11989

Comments

Uh oh!

Current behavior

Expected behavior

Reproduction

Platform

Packages

Environment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!