I'm encountering the following warning in my React Native project when using BottomTab.Navigator from @react-navigation/bottom-tabs and BottomNavigation.Bar from react-native-paper

Error

Warning: A props object containing a "key" prop is being spread into JSX: 
<Touchable {...props} />
React keys must be passed directly to JSX without using spread.

Here’s a code snippet of how I have set up my bottom tab navigation:

function AppNav({ routes }) {
  const renderTabBar = ({ navigation, state, descriptors, insets }) => {
    const navigationBarProps = {
      version: 3,
      style: {
        backgroundColor: "#212529",
      },
      activeColor: "orange",
      inactiveColor: "lightgrey",
      shifting: false,
      navigationState: state,
      safeAreaInsets: insets,
      onTabPress: ({ route, preventDefault }) => {
        const event = navigation.emit({
          type: "tabPress",
          target: route.key,
          canPreventDefault: true,
        });

        if (event.defaultPrevented) {
          preventDefault();
        } else {
          navigation.dispatch({
            ...CommonActions.navigate(route.name, route.params),
            target: state.key,
          });
        }
      },
      renderIcon: ({ route, focused }) => {
        const { options } = descriptors[route.key];
        return options.tabBarIcon ? options.tabBarIcon({ focused, size: 24 }) : null;
      },
      getLabelText: ({ route }) => {
        const { options } = descriptors[route.key];
        return options.tabBarLabel ?? route.name;
      },
    };

    return <BottomNavigation.Bar {...navigationBarProps} />;
  };

  return (
    <BottomTab.Navigator
      screenOptions={{ headerShown: false }}
      tabBar={renderTabBar}
    >
      {routes?.map((route) => (
        <BottomTab.Screen
          key={route.key}
          name={route.name}
          ponent={routeponent}
          options={{
            title: route.name,
            tabBarIcon: ({ size, focused }) => (
              <MaterialCommunityIcons
                name={focused ? route.icon_focused : route.icon_default}
                color={focused ? "orange" : "#fafafa"}
                size={size}
              />
            ),
          }}
        />
      ))}
    </BottomTab.Navigator>
  );
}

This happened when i upgraded my dependencies. Here are my current package versions:

    "react": "18.3.1",
    "react-native": "0.76.1",
    "expo": "^52.0.4",
    "@react-navigation/bottom-tabs": "^6.5.19",
    "@react-navigation/drawer": "^6.6.14",
    "@react-navigation/native": "^6.1.16",
    "@react-navigation/native-stack": "^6.9.25",

I'm encountering the following warning in my React Native project when using BottomTab.Navigator from @react-navigation/bottom-tabs and BottomNavigation.Bar from react-native-paper

Error

Warning: A props object containing a "key" prop is being spread into JSX: 
<Touchable {...props} />
React keys must be passed directly to JSX without using spread.

Here’s a code snippet of how I have set up my bottom tab navigation:

function AppNav({ routes }) {
  const renderTabBar = ({ navigation, state, descriptors, insets }) => {
    const navigationBarProps = {
      version: 3,
      style: {
        backgroundColor: "#212529",
      },
      activeColor: "orange",
      inactiveColor: "lightgrey",
      shifting: false,
      navigationState: state,
      safeAreaInsets: insets,
      onTabPress: ({ route, preventDefault }) => {
        const event = navigation.emit({
          type: "tabPress",
          target: route.key,
          canPreventDefault: true,
        });

        if (event.defaultPrevented) {
          preventDefault();
        } else {
          navigation.dispatch({
            ...CommonActions.navigate(route.name, route.params),
            target: state.key,
          });
        }
      },
      renderIcon: ({ route, focused }) => {
        const { options } = descriptors[route.key];
        return options.tabBarIcon ? options.tabBarIcon({ focused, size: 24 }) : null;
      },
      getLabelText: ({ route }) => {
        const { options } = descriptors[route.key];
        return options.tabBarLabel ?? route.name;
      },
    };

    return <BottomNavigation.Bar {...navigationBarProps} />;
  };

  return (
    <BottomTab.Navigator
      screenOptions={{ headerShown: false }}
      tabBar={renderTabBar}
    >
      {routes?.map((route) => (
        <BottomTab.Screen
          key={route.key}
          name={route.name}
          ponent={route.ponent}
          options={{
            title: route.name,
            tabBarIcon: ({ size, focused }) => (
              <MaterialCommunityIcons
                name={focused ? route.icon_focused : route.icon_default}
                color={focused ? "orange" : "#fafafa"}
                size={size}
              />
            ),
          }}
        />
      ))}
    </BottomTab.Navigator>
  );
}

This happened when i upgraded my dependencies. Here are my current package versions:

    "react": "18.3.1",
    "react-native": "0.76.1",
    "expo": "^52.0.4",
    "@react-navigation/bottom-tabs": "^6.5.19",
    "@react-navigation/drawer": "^6.6.14",
    "@react-navigation/native": "^6.1.16",
    "@react-navigation/native-stack": "^6.9.25",

• javascript
• react-native
• expo
• new-architecture

4 Answers 4

The warning stems from react-native-paper's BottomNavigation.Bar ponent. For the renderTouchable prop, there's a default value with a spread syntax like the below

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

To fix this, pass your own Touchable where key is separated from the rest of the props like,

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

Yes, that warning appears due to changes in React 18.

You now have to pass key as a separate argument.

Example

const { key, ...rest } = props;

<SomeComponent key={key} {...rest} />

Find BottomNavigationBar.tsx in

node_modules/react-native-paper/src/ponents/BottomNavigation/BottomNavigationBar.tsx

Inside the file, change

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

to

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

And that should be it.

This is an homemade recipe.

My issue was related to the react-native-tab-view and I only updated my package version and it worked for me.

Before the warning

: "react-native-tab-view": "^3.5.1"

After warning

"react-native-tab-view": "^4.0.5"