-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Future chore - BottomNavigation: React 18.3 to warn about spreading key props in JSX #4401
Comments
Include the actual error as text so it's easier to find when searching 🙄
|
Same issue. Waiting on the resolution. |
Same issue here with React Native v0.74 and React 18.3.1 (which was the version suggested by the official react native upgrade instructions) |
This is my solution (I am applying it as a patch file in my project) diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx
index 0bfe303bfb443396ede776726faa0f8ba32752cd..a59ae061dcaa51f026e78de0ccfd536318dd0aee 100644
--- a/src/components/BottomNavigation/BottomNavigationBar.tsx
+++ b/src/components/BottomNavigation/BottomNavigationBar.tsx
@@ -360,7 +360,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
navigationState,
renderIcon,
renderLabel,
- renderTouchable = (props: TouchableProps<Route>) => <Touchable {...props} />,
+ renderTouchable = ({ key, ...props }: TouchableProps<Route>) => <Touchable key={key} {...props} />,
getLabelText = ({ route }: { route: Route }) => route.title,
getBadge = ({ route }: { route: Route }) => route.badge,
getColor = ({ route }: { route: Route }) => route.color, |
Current behaviour
React 18.3 adds a warning about spreading props containing a "key" prop (facebook/react#25697). Current version of React Native uses 18.2, but I think we'd expect it to be migrated in the next version.
When testing with React 18.3, we get this warning on a Touchable inside BottomNavigation.Bar.
Expected behaviour
Expected not to receive warnings.
How to reproduce?
Fresh React Native project, but change React version to 18.3.1.
Reproduction example: https://github.com/nick42d/KeySpreadReproduction
Preview
What have you tried so far?
This is my mistake for upgrading React too early, but since I spent a few hours debugging this figure my pain can be your gain.
Your Environment
The text was updated successfully, but these errors were encountered: