Virtualize key error

[jannomeister]

I'm having this warning VirtualizedList: missing keys for items, make sure to specify a key or id property on each item or provide a custom keyExtractor. how to solve this one?

[emclab]

I have the similar error when wrap the tag within
<SafeAearView> <ScrollView> <Container> //<<<== Native Base component

The error is:

[12:59:54] W | ReactNativeJS ▶︎ 'VirtualizedList: missing keys for items, make sure to specify a key or id property on each item or provide a custom keyExtractor.', '', '\nVirtualizedList@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:64197:22\nFlatList@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62152:36\nRCTView\nRCTView\nAutocomplete@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:207561:36\nRCTView\nAutoTags@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:207272:36\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nTouchableOpacity@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:57032:36\nItem@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:202579:22\nStyled(Item)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nForm@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:200945:22\nStyled(Form)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nRCTScrollView\nScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62508:36\nKeyboardAwareScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:200143:38\nRCTView\nSafeAreaView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73829:41\nContent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:199939:22\nStyled(Content)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:198792:22\nStyled(Container)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nRCTScrollView\nScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62508:36\nRCTView\nSafeAreaView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73829:41\nItie@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:206865:41\nStaticContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:111421:17\nEnsureSingleNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:110110:24\nSceneView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:111304:22\nRCTView\nRCTView\nRCTView\nCardSheet@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:121241:23\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nPanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:105897:38\nPanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116092:34\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nRCTView\nCard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:118687:36\nCardContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:118400:22\nRNSScreen\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116891:36\nMaybeScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116752:24\nRNSScreenContainer\nScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116978:36\nMaybeScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116725:23\nCardStack@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116293:36\nKeyboardManager@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:121424:36\nSafeAreaPr

[12:59:54] W | ReactNativeJS ▶︎ 'VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.', '\nVirtualizedList@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:64197:22\nFlatList@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62152:36\nRCTView\nRCTView\nAutocomplete@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:207561:36\nRCTView\nAutoTags@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:207272:36\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nTouchableOpacity@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:57032:36\nItem@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:202579:22\nStyled(Item)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nForm@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:200945:22\nStyled(Form)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nRCTScrollView\nScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62508:36\nKeyboardAwareScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:200143:38\nRCTView\nSafeAreaView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73829:41\nContent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:199939:22\nStyled(Content)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:198792:22\nStyled(Container)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nRCTScrollView\nScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62508:36\nRCTView\nSafeAreaView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73829:41\nItie@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:206865:41\nStaticContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:111421:17\nEnsureSingleNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:110110:24\nSceneView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:111304:22\nRCTView\nRCTView\nRCTView\nCardSheet@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:121241:23\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nPanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:105897:38\nPanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116092:34\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nRCTView\nCard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:118687:36\nCardContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:118400:22\nRNSScreen\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116891:36\nMaybeScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116752:24\nRNSScreenContainer\nScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116978:36\nMaybeScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116725:23\nCardStack@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116293:36\nKeyboardManager@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:121424:3

The error above starts to appear when typing in tag box. Also the tags view won't reload and update after deleting a tag and this may have something to do with the error above. It happens in android simulator with RN 0.62.2/win10

[jannomeister]

Hi @emclab , I already solved this one. When I check the implementation of this component, since he just use the auto complete plugin, you can call keyExtractor like this:

<AutoTags
   keyExtractor={(item, index) => item + index}
  
   // other props here
/>

Hope it helps you. Happy coding!

[emclab]

jannomeister, thank for the solution. I added the code above in my AutoTags to get rid of warning about unique keys. But virsualizedList can't never be nested is still present and this one causes the page fails to reload after deleting. Tried to remove and it didnt' help.