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

[veho-paul]

Description

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

CodeSandbox/Snack link

See below

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

NativeBase Version

^3.4.0

Platform

• [x] Android
• [ ] CRA
• [ ] Expo
• [X] iOS
• [ ] Next

Other Platform

No response

Additional Information

<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]

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

[ankit-tailor]

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

[v-x2]

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

[HyperNovax]

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.