NativeBase
NativeBase copied to clipboard
Key/List issue - Check the render method of `ForwardRef(Container)`.
Description
Rendering children in a container is throwing a "key" error
CodeSandbox/Snack link
See below
Steps to reproduce
- Go to '...'
- Click on '...'
- Scroll down to '...'
- 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
Thank you @veho-paul for reporting this issue. We will look into it.
Hey, Can you share reproducible snack link for the issue ? I wasn't able to reproduce the issue.
Updated @ 3.4.17 but the issue still exists. Switching to react-native's flat-list or removing the ListHeaderComponent
"hide" the warning.
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.