Warning: Props containing "key" prop is being spread into JSX

[ChromeQ]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-paper@5.12.5 for the project I'm working on.

Recently upgraded an expo project to Expo SDK 52 which includes react-native 0.76, the following warning/error is being thrown when rendering a BottomNavigationBar:

 ERROR  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)
    in View (created by BottomNavigation)
    in BottomNavigation (created by MaterialBottomTabView)
    in MaterialBottomTabView (created by MaterialBottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by MaterialBottomTabNavigator)
    in MaterialBottomTabNavigator (created by MemoHomeScreen)

The stack trace is much longer but I stopped at MemoHomeScreen as that is the first of my own files.
I delved into the source code and found the following which the diff that solved my problem:

diff --git a/node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx b/node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx
index 0bfe303..a59ae06 100644
--- a/node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx
+++ b/node_modules/react-native-paper/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,

This issue body was partially generated by patch-package.

P.S. This diff only changes the source file, the .js file in node_modules/react-native-paper/lib/module/components/BottomNavigation/BottomNavigationBar.js will also need changing if patching yourself, something like:

-    renderTouchable = props => /*#__PURE__*/React.createElement(Touchable, props),
+    renderTouchable = ({
+      key,
+      ...props
+    }) => /*#__PURE__*/React.createElement(Touchable, _extends({
+      key: key
+    }, props)),

[ChromeQ]

Just realised this is a duplicate of
#4503
#4494
#4401

[sadirul]

Warning: If you modify node_modules, your changes will be lost if you reinstall dependencies (npm install or yarn install). You can use patch-package to persist changes.

You can pass the below code directly in you component
import { TouchableOpacity } from 'react-native'

<BottomNavigation.Bar
renderTouchable={({ key, ...props }) => <TouchableOpacity activeOpacity={1} key={key} {...props} />} //ADDED THIS LINE
navigationState={state}
safeAreaInsets={insets}
onTabPress={({ route }) => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
})
/>

[ChromeQ]

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