NativeBase: ForwardRef(creatIcon) in Select is missing the key prop
Describe the bug
I copied the example code in the docs, and the warning shows up. I thought it occurred somewhere with ForwardRef(createdIcon), so I removed the endIcon in _selectedItem and tried again. But the warning was still there.
<Select
minWidth="200"
accessibilityLabel="Choose Service"
placeholder="Choose Service"
_selectedItem={{
bg: 'teal.600',
endIcon: <CheckIcon size="5" />,
}}
mt="1"
>
<Select.Item label="UX Research" value="ux" />
<Select.Item label="Web Development" value="web" />
<Select.Item label="Cross Platform Development" value="cross" />
<Select.Item label="UI Designing" value="ui" />
<Select.Item label="Backend Development" value="backend" />
</Select>
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `ForwardRef(createdIcon)`. See https://reactjs.org/link/warning-keys for more information.
G@http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:156206:36
in createdIcon
in RCTView (created by View)
in View
in Unknown
in Box
in InputAdvance
in Input
in RCTView (created by View)
in View
in RCTView (created by View)
in View (created by Pressable)
in Pressable (created by Pressable)
in RCTView (created by View)
in View
in Unknown
in Box
in Select
in RCTView (created by View)
in View
in Unknown
in Box
in TouchableWithoutFeedback (created by EntryScreen)
in RCTView (created by View)
in View (created by KeyboardAvoidingView)
in KeyboardAvoidingView
in Unknown
in Unknown (created by EntryScreen)
in EntryScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Screen)
in MaybeFreeze (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in NativeStackNavigator (created by RootNavigator)
in RootNavigator (created by Navigation)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by Navigation)
in Navigation (created by App)
in AuthContextProvider (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in QueryClientProvider (created by App)
in I18nextProvider (created by App)
in SSRProvider (created by NativeBaseProvider)
in ToastProvider (created by NativeBaseProvider)
in PortalProvider (created by NativeBaseProvider)
in HybridProvider (created by NativeBaseProvider)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by NativeBaseProvider)
in NativeBaseConfigProviderProvider (created by NativeBaseProvider)
in ThemeProvider (created by NativeBaseProvider)
in NativeBaseProvider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react/cjs/react-jsx-runtime.development.js:117:4 in printWarning
at node_modules/react/cjs/react-jsx-runtime.development.js:93:16 in error
at node_modules/react/cjs/react-jsx-runtime.development.js:986:9 in validateExplicitKey
at node_modules/react/cjs/react-jsx-runtime.development.js:1013:29 in validateChildKeys
at node_modules/react/cjs/react-jsx-runtime.development.js:1184:27 in jsxWithValidation
at node_modules/native-base/src/components/primitives/Icon/createIcon.tsx:14:6 in createdIcon
at node_modules/@react-navigation/native/src/useThenable.tsx:25:13 in resolve
To Reproduce
Copy the code below and paste it anywhere in your expo app.
<Select
minWidth="200"
accessibilityLabel="Choose Service"
placeholder="Choose Service"
_selectedItem={{
bg: 'teal.600',
endIcon: <CheckIcon size="5" />,
}}
mt="1"
>
<Select.Item label="UX Research" value="ux" />
<Select.Item label="Web Development" value="web" />
<Select.Item label="Cross Platform Development" value="cross" />
<Select.Item label="UI Designing" value="ui" />
<Select.Item label="Backend Development" value="backend" />
</Select>
Expected behaviour
No warning shows up.
Screenshots If applicable, add screenshots to help explain your problem.
Platform
- NativeBase version 3.2.2
- Device: iPhone12 (simulator)
- OS: MacOS
- React Native version 0.64.3
- Expo sdk version 44
- node 16.6.2
- yarn 1.22.17
Additional information
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 15
- Comments: 26
Commits related to this issue
- fix: missing the key prop for ThreeDotsIcon ref: https://github.com/GeekyAnts/NativeBase/issues/4429 — committed to msyaifullah/NativeBase by deleted user a year ago
- fix: missing the `key` prop for ThreeDotsIcon issues ref: https://github.com/GeekyAnts/NativeBase/issues/4429#issuecomment-1227985564 — committed to msyaifullah/NativeBase by msyaifullah a year ago
I’m on 3.3.5 and still have this error 🤔
For anyone coming here needing a quick fix: the Select element allows you to submit your own drop down icon using the dropdownIcon prop. Using this explicitly instead of using the default will work. No key needed.
Thanks for reporting! This issue has been fixed in the latest version (v3.3.1)
I don’t know if internally it occurs for the same reason, and sorry if not, and if I’m reporting in the wrong place. But I had this problem when using IconButton nested with ThreeDotsIcon. (in
3.4.9)<IconButton icon={<ThreeDotsIcon />} />The results was:
I just got the same error with version 3.3.7:
I was able to use the workaround suggested by @OneHatRepo to fix it by adding the dropdownIcon prop and using a custom icon for all my Select elements:
(Probably should use a better key value though but this was a quick and dirty fix 😄)
Hi Everyone, Thanks for reporting the issue, we are working on it.
The immediate issue is in Select (native-base/src/components/primitives/Select), which is using the ChevronDownIcon (native-base/src/components/primitives/Icon/Icons/Chevron) by default. This icon is created with the createIcon() function (native-base/src/components/primitives/Icon/createIcon). If this function returns an SVGIcon with a key, the error goes away. So a bandaid fix would be to change line 14 of createIcon to:
However, this very well might have knock-on effects. It could be that this key would register as a duplicate/collision where multiple icons were created. So it would be best if someone who knows the internals of NativeBase would change this.
I think it would be great if createIcon could accept a key prop, so the convenience components (e.g. ChevronDownIcon) could each add their own unique key (e.g. “ChevronDownIcon”), which would be unlikely to collide.
Hi everyone, This issue is fixed in
3.4.0. Let me know if this doesn’t work for you.Thanks for your patience. We’re currently working on a new release with these fixes.
I feel that the problem is with ChevronDownIcon. If I add this icon I am getting the error. The problem is not with select but with this icon.
Same, using the latest version and seeing this error.