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 (https://github.com/facebook/react/pull/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.

[karanmartian]

hey i have same error when migrated to Expo SDK 52. please fix it

[DKS0751081]

I am not able to find this renderTouchable = ({ key, ...props }: TouchableProps) => <Touchable key={key} {...props} />, I can only see renderTouchable?: (props: TouchableProps) => React.ReactNode; @satosoft

[kvbalib]

i've added a post-install script in my project to temporarily fix the warning

package.json

  "scripts": {
    // ... other scripts
    "postinstall": "node scripts/postinstall.js"
  }
}

/scripts/postinstall.js

const path = require('path')

const filePath = path.join(
  __dirname,
  '..',
  'node_modules',
  'react-native-paper',
  'src',
  'components',
  'BottomNavigation',
  'BottomNavigationBar.tsx'
)

/**
 * This script is used to modify the BottomNavigationBar.tsx file in the react-native-paper package to fix the issue with the key prop warning.
 * TODO: Remove this script once the issue is fixed in the react-native-paper package.
 */
fs.readFile(filePath, 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading the file:', err)
    return
  }

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

  if (data.includes(modifiedCode)) {
    console.log('File already modified.')
    return
  }

  const updatedData = data.replace(originalCode, modifiedCode)

  fs.writeFile(filePath, updatedData, 'utf8', (err) => {
    if (err) {
      console.error('Error writing the file:', err)
      return
    }
    console.log('File successfully modified.')
  })
})

[CommanderRedYT]

@kvbalib You might rather want to use this: https://www.npmjs.com/package/patch-package

[kvbalib]

@CommanderRedYT thanks

not really - patch-package is an overkill for me in this case, hopefully someone will fix it soon - then it's just one line of code to delete :)

[satosoft]

I am not able to find this renderTouchable = ({ key, ...props }: TouchableProps) => <Touchable key={key} {...props} />, I can only see renderTouchable?: (props: TouchableProps) => React.ReactNode; @satosoft

it depend on version. As I check on https://github.com/callstack/react-native-paper/blob/main/src/components/BottomNavigation/BottomNavigationBar.tsx it still exists at line 363. @DKS0751081

[karanmartian]

Guys this error is also resulting in the first tab not being shown by default in a tab navigator. It somehow goes to the last tab.

On Thu, 21 Nov 2024, 21:52 satosoft.com, @.***> wrote:

I am not able to find this renderTouchable = ({ key, ...props }: TouchableProps) => <Touchable key={key} {...props} />, I can only see renderTouchable?: (props: TouchableProps) => React.ReactNode; @satosoft https://github.com/satosoft

it depend on version. As I check on https://github.com/callstack/react-native-paper/blob/main/src/components/BottomNavigation/BottomNavigationBar.tsx it still exists at line 363.

— Reply to this email directly, view it on GitHub https://github.com/callstack/react-native-paper/issues/4401#issuecomment-2491691827, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACPW73DXW4UPO6OEHJE4VED2BYCDZAVCNFSM6AAAAABHOXC6WKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOJRGY4TCOBSG4 . You are receiving this because you commented.Message ID: @.***>

[PabloRuiz-TT]

Me funciono al modificar propiedad renderTouchable como marca el post. De esta forma encontre en archivo: node_modules\react-native-paper\src\components\BottomNavigation\BottomNavigationBar.tsx

se encuentra en la linea: 353 del siguiente archivo

[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

[elibroftw]

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?

Line 451:

<TabBarItem {...props} key={props.key} />

FYI: This is fixed in 4.X.X

[aykut-canturk]

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} />,

thanks!

[salememd]

This issue has been reported since May, yet still no official fix for it. Paper is really great UI library but our team is now considering going away from it unfortunately

[stephanheinemann]

I decided not to patch but simply provide the BottomNavigation with the renderTouchable instead, e.g.,

import { BottomNavigation, TouchableRipple } from 'react-native-paper';

<BottomNavigation navigationState={{ index, routes }} onIndexChange={setIndex} renderScene={renderScene} renderTouchable={({ key, ...props }) => <TouchableRipple key={key} {...props} />} />

[haykerman]

I'm not using BottomNavigation directly. I use createMaterialBottomTabNavigator. In which case it's unclear how to resolve the issue.

[haykerman]

I'm not using BottomNavigation directly. I use createMaterialBottomTabNavigator. In which case it's unclear how to resolve the issue.

Had to switch to regular BottomNaviagation (createBottomTabNavigator).

[JesusTectronic]

import { BottomNavigation, TouchableRipple } from 'react-native-paper';

<BottomNavigation
      ...
      renderTouchable={({ key, ...props }) => <TouchableRipple key={key} {...props} />}
/>

[ChromeQ]

This PR can be closed now, turns out this is fixed (although not in isolation or from an existing PR) I can confirm it works without warning on the latest version.

https://github.com/callstack/react-native-paper/commit/77d3af73a2db020da4a2a90592a4eda030e2a2ee#diff-54d07d0dd9a891cd54e08e7642d895b92a592e9294af566460fa17dab475fa0eL363

[nick42d]

This PR can be closed now, turns out this is fixed (although not in isolation or from an existing PR) I can confirm it works without warning on the latest version.

77d3af7#diff-54d07d0dd9a891cd54e08e7642d895b92a592e9294af566460fa17dab475fa0eL363

Confirmed - this saga can come to a close as, Callstack implemented here: https://github.com/callstack/react-native-paper/commit/77d3af73a2db020da4a2a90592a4eda030e2a2ee#diff-54d07d0dd9a891cd54e08e7642d895b92a592e9294af566460fa17dab475fa0eL363