BottomNavigation: (NOBRIDGE) ERROR Warning: A props object containing a "key" prop is being spread into JSX

[romrayster]

Current behaviour

A warning is thrown when spreading props into JSX, specifically when a key prop is included in the spread object. The warning states that React keys must be passed directly to JSX, without using the spread operator. This occurs in BottomNavigation.Bar when using the Touchable component.

---

Expected behaviour

The key prop should be passed directly to JSX without being part of the spread object, ensuring compatibility with React's rules for key handling.

---

How to reproduce?

1. Use the BottomNavigation component from React Native Paper.
2. Render a BottomNavigation.Bar inside a BottomNavigation component.
3. Pass props containing a key prop to a Touchable component within BottomNavigation.Bar.
4. The warning will be triggered in the console.

Example code:

import * as React from 'react';
import { BottomNavigation } from 'react-native-paper';

const MyComponent = () => {
  const props = {
    key: 'someKey',
    route: 'home',
    onPress: () => console.log('Pressed'),
    // other props...
  };

  return (
    <BottomNavigation
      navigationState={{ index: 0, routes: [{ key: 'home', title: 'Home', icon: 'home' }] }}
      onIndexChange={() => {}}
    >
      <BottomNavigation.Bar {...props} />
    </BottomNavigation>
  );
};

Preview

No screenshot or video applicable for this issue as it's a warning that appears in the console.

What have you tried so far?

• I have confirmed the issue by isolating the BottomNavigation component and the key prop in the spread.
• I tried manually passing the key prop outside of the spread, but the issue is inherent to how React Native Paper handles BottomNavigation.Bar.

Your Environment

software	version
ios	-
android	-
react-native	0.76.3
react-native-paper	5.9.1
node	20.9.0
yarn	1.22.22
expo sdk	52.0.17

[iM-GeeKy]

Duplicate of #4401, here is the patch you can use as a temporary workaround #4401 (comment)