react-native-draggable-flatlist: Wrong drag offset after changing ListHeaderComponent's height

"react-native": "0.61.5",
"react-native-draggable-flatlist": "2.1.2"

<DraggableFlatList
   //... 
   ListHeaderComponent={this.props.HeaderComponent}
   ListHeaderComponentStyle={styles.header}
   //...
/>

const styles = StyleSheet.create({
   header: {
      paddingTop: 72,
      paddingHorizontal: '13%',
      marginBottom: 36,
   },
   //...
});

HeaderComponent is a some view. After some async actions (~3 sec after did mount) HeaderComponent’s height will be changed. DraggableFlatList will get wrong offset while any element is dragging (wrong hovering position), so looks like it’s not recalculated.

Any suggestions?

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

yep, whenever layoutInvalidationKey changes all items and offsets will be remeasured.

computerjazz on Feb 6, 2020

Thanks for the example, I see the issue now. You can invalidate current measurements by setting a new key, so in this case you can force a recalculation by updating your keyExtractor with visible – something like:

keyExtractor={(item, index) => `draggable-item-${item.key}-${this.state.visible}`}

https://snack.expo.io/@computerjazz/swipetodelete-pkg-header-resize-bug

computerjazz on Feb 4, 2020

added layoutInvalidationKey: https://github.com/computerjazz/react-native-draggable-flatlist/commit/bf8eb9d6c2621c085e2fba6ddcaf3d1d7e6e582f

So in the next release, to fix the above example, instead of modifying your keyExtractor you will be able to pass:

<DraggableFlatList 
  layoutInvalidationKey={`someKey-${this.state.visible}`}
  //...other props
/>

computerjazz on Feb 6, 2020

That’s perfect. Thanks so much for this awesome library, it seriously saved me so much time and works great!

nhuesmann on Feb 6, 2020