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

[KrisLau]

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 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

• Android
• iOS
• Web
• Windows
• MacOS

Packages

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

Environment

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

package	version
react-native-tab-view	3.5.2

[github-actions]

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]

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]

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]

@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]

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]

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]

@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]

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

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

[KrisLau]

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

[Willham12]

+1 and thanks for the patch @KrisLau