ForwardRef(creatIcon) in Select is missing the key prop

[YenTingWu]

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

[hrithik73]

Getting the exact same error :)
Any upadate regarding this will be very helpfull

[OneHatRepo]

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:

  <SVGIcon children={children} {...initialProps} {...props} ref={ref} key="mykey" />

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.

[Ahmed-Ibrahim-Anter]

Not this problem only I have this issue also slowwwwwwwwwer in two-component [Model&& Select] components for a test I use picker components from react-native and suddenly with its performance please solve this problem and also slower in your components

[OneHatRepo]

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.

[surajahmed]

Thanks for reporting! This issue has been fixed in the latest version (v3.3.1)

[mchambaud]

I'm on 3.3.5 and still have this error 🤔

[DeluxeOwl]

Same, using the latest version and seeing this error.

[dlombardi]

Still seeing this error as well. Although it looks like the team is aware

[ankit-tailor]

Hi Everyone, Thanks for reporting the issue, we are working on it.