Future chore - BottomNavigation: React 18.3 to warn about spreading key props in JSX

[nick42d]

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

software	version
ios	x
android	x
react-native	0.74.1
react-native-paper	5.12.3
node	21.7.3
npm or yarn	yarn 3.6.4
expo sdk	x.x.x

[philBrown]

Include the actual error as text so it's easier to find when searching 🙄

Warning: A props object containing a "key" prop is being spread into JSX: let props = {key: someKey, route: ..., borderless: ..., centered: ..., rippleColor: ..., onPress: ..., onLongPress: ..., testID: ..., accessibilityLabel: ..., accessibilityRole: ..., accessibilityState: ..., style: ..., children: ...}; <Touchable {...props} /> React keys must be passed directly to JSX without using spread: let props = {route: ..., borderless: ..., centered: ..., rippleColor: ..., onPress: ..., onLongPress: ..., testID: ..., accessibilityLabel: ..., accessibilityRole: ..., accessibilityState: ..., style: ..., children: ...}; <Touchable key={someKey} {...props} /> in BottomNavigation.Bar (created by BottomNavigation) in RCTView (created by View)

[andrei-m-code]

Same issue. Waiting on the resolution.

[CommanderRedYT]

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)