Key/List issue - Check the render method of `ForwardRef(Container)`.

veho-paul commented 2 years ago

Rendering children in a container is throwing a "key" error

See below

^3.4.0

No response

<Container>
  <Heading size="md" color={colors.brand.blue} mb={5}>
    {clientName}
  </Heading>
</Container>

doesn't throw the error, but as soon as I add another child

<Container>
  <Heading size="md" color={colors.brand.blue} mb={5}>
    {clientName}
  </Heading>
  <Text>Hey</Text>
</Container>

I get this error:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ForwardRef(Container)`.

Specifically this is happening in a ListHeaderComponent of a FlatList

Krithikj20 commented 2 years ago

Thank you @veho-paul for reporting this issue. We will look into it.

ankit-tailor commented 2 years ago

Hey, Can you share reproducible snack link for the issue ? I wasn't able to reproduce the issue.

v-x2 commented 1 year ago

Updated @ 3.4.17 but the issue still exists. Switching to react-native's flat-list or removing the ListHeaderComponent "hide" the warning.

HyperNovax commented 1 year ago

I have this problem when I have a native-base Pressable in the ListHeaderComponent and the Pressable have more than one child.

Wrap their children in one component work fine for me. The alert is no longer displayed.

I was able to test and the alert is displayed if for a component (it doesn't matter which one, View, Pressable...) it has multiple children.

GeekyAnts / NativeBase