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)

[CommanderRedYT]

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,

[cristiammercado]

There is a new version of react native (0.75.1) with the latest version of react as of today (18.3.1) and this generates a warning in the console (5.12.5). Any progress on this issue?

[steve-cahn]

Any update on this?

[therbta]

I made a modification to the "renderTouchable" function in the file and it solved the problem.

To find the file in the project, navigate to:
node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx

Look for this:

renderTouchable = (props: TouchableProps<Route>) => <Touchable {...props} />,

and replace it with:

renderTouchable = ({ key, ...props }: TouchableProps<Route>) => <Touchable key={key} {...props} />,

[marcpope]

There's a related issue for react-native-tab-view.. here's a patch:
https://github.com/user-attachments/files/16710880/react-native-tab-view%2B3.5.2.patch

[Sakib-203-15-3883]

Thanks @therbta it 's work

[L4znet]

Hey, I've encountered the issue too, but it seems the patch doesn't working

Here what I've found in my BottomNavigationBar.tsx :
renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;

When I apply the patch I got this :

diff --git a/node_modules/react-native-tab-view/src/TabBar.tsx b/node_modules/react-native-tab-view/src/TabBar.tsx
index e8d0b4c..1c3c09f 100644
--- a/node_modules/react-native-tab-view/src/TabBar.tsx
+++ b/node_modules/react-native-tab-view/src/TabBar.tsx

File to patch: node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx
patching file node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx
Hunk #1 FAILED at 364.
Hunk #2 FAILED at 446.

Does someone know how to fix that?

[nickba86]

Hi all! I have the same issue.
I guess is going to be correct in the next paper update right?
I understand for now this message is just a warning but in future React versions will no longer work.

Thanks

[satosoft]

The answer of @therbta or @CommanderRedYT both work. Note that there are two places of renderTouchable inside BottomNavigation.tsx file :

renderTouchable?: (props: TouchableProps) => React.ReactNode; // not change this line

You should only make change in this:

const BottomNavigation = ({
  navigationState,
  renderScene,
  renderIcon,
  renderLabel,
  
//renderTouchable = (props: TouchableProps) => <Touchable {...props} />,
  //change to:
  renderTouchable = ({ key, ...props }: TouchableProps) => <Touchable key={key} {...props} />,

After that reload app, I no longer see red warning about spreading key props in JSX. Note that this change must be made manually in node_module. It still haven't updated in react-native-paper package.