A props object containing a "key" prop is being spread into JSX about react-navigation HOT 10 OPEN

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

from react-navigation.

+1 and thanks for the patch @KrisLau

from react-navigation.

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.

from react-navigation.

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

from react-navigation.

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.

from react-navigation.

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.

from react-navigation.

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.

from react-navigation.

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

from react-navigation.

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

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

from react-navigation.

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

from react-navigation.