search

JoeRoddy / react-native-tag-autocomplete

React Native Tag Autocompletion
69 stars 26 forks source link

Virtualize key error #51

Open jannomeister opened 4 years ago

jannomeister commented 4 years ago

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 commented 4 years ago

I have the similar error when wrap the tag within `

//<<<== 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 commented 4 years ago

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 commented 4 years ago

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.