Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Wrong drag offset after changing ListHeaderComponent's height

See original GitHub issue
"react-native": "0.61.5",
"react-native-draggable-flatlist": "2.1.2"
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?

Issue Analytics

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

github_iconTop GitHub Comments

computerjazzcommented, Feb 6, 2020

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

computerjazzcommented, Feb 4, 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}`}

Read more comments on GitHub >

github_iconTop Results From Across the Web

FlatList with sticky ListHeaderComponent ... - GitHub
When using <FlatList /> with the props ListHeaderComponent , and stickyHeaderIndices , the scroll area is the full height of the scree. When...
Read more >
react native - FlatList Weird Behavior after appending new data
<FlatList keyboardDismissMode = 'on-drag' keyboardShouldPersistTaps = 'always' getItemLayout={(data, index) => ( {length: 575, offset: 575 ...
Read more >
React Native FlatList Scroll to Offset - YouTube
Learn how to scroll to an offset for a FlatList in React Native. Code: drag -and-drop-flatlist/tree/ ...
Read more >
Chrome Drag-to-Sort - “Can it be done in React Native?”
Learn React Native Gestures and Animations at code: ...
Read more >
Usage | FlashList
When set to true the list's rendered size needs to be deterministic (i.e., height and width greater than 0) as FlashList will skip...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found