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",
Share
Improve this question
asked Nov 13, 2024 at 8:59
BrianBrian
1079 bronze badges
4 Answers
Reset to default 7The 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"