benevbright/react-navigation-collapsible

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 !