React native Question posted in
The official React Native documentation can be found here.

React Native Warning: A props object containing a "key" prop is being spread into JSX with BottomTab.Navigator and react-native-paper

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}
          component={route.component}
          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",
Tags:

2

Answers


  1. 0

    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} />
    Login or Signup to reply.
  2. 0

    The warning stems from react-native-paper‘s BottomNavigation.Bar component. 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} />)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search