Each child in a list should have a unique "key" prop.
Closed this issue · 2 comments
Information
- react-native version: 0.61.4
- react-navigation version:
"@react-navigation/bottom-tabs": "^5.4.1",
"@react-navigation/drawer": "^5.7.1",
"@react-navigation/native": "^5.2.6",
"@react-navigation/stack": "^5.3.1", - react-navigation-collapsible version: 5.6.0
- Platform (iOS/Android): both
- react-native init or Expo: Expo SDK 36
Detail
When we set the screens in an array constant :
const screens = [{ name: "WithDefaultHeader1", component: DefaultHeaderScreen, options: {} }, { name: "WithDefaultHeader2", component: DefaultHeaderScreen, options: {} }, { name: "WithDefaultHeader3", component: DefaultHeaderScreen, options: {} }];
And we iterate to that constant for the rendering :
{screens.map(screen => createCollapsibleStack( <Stack.Screen name={screen.name} component={screen.component} options={screen.options} />, { collapsedColor: 'white', } ) )}
We have that warning : "Warning: Each child in a list should have a unique "key" prop...." even if we set an unique key on the stack screen :
{screens.map(screen => createCollapsibleStack( <Stack.Screen key={screen.name} name={screen.name} component={screen.component} options={screen.options} />, { collapsedColor: 'white', } ) )}
Thanks
Thanks for the issue.
It's fixed in 5.6.1 and you can pass your key like following.
{createCollapsibleStack(
<Stack.Screen
name="HomeScreen"
component={MyScreen}
options={{
headerStyle: { backgroundColor: 'green' },
title: 'Home',
}}
/>,
{
collapsedColor: 'red' /* Optional */,
useNativeDriver: true /* Optional, default: true */,
key:
'HomeScreen' /* Optional, a key for your Stack.Screen element */,
}
)}
@benevbright Thanks for the quick fix !