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