react-native-draggable-flatlist: Draggable Flatlist inside a ScrollView doesn't account for scrolled offset
When nesting a DraggableFlatlist
inside a ScrollView
the proxy components rendered while dragging are not positioned relative to the scrolled position of the parent container (the ScrollView
).
This means they either disappear or render offset from the mouse/touch position by the scrolled amount.
In the below test case, I’m offsetting the position of the draggable flatlist using content container padding on the ScrollView
. Dragging/re-ordering still works by disabling the scrollview with onMoveBegin
I would guess that you need to position the proxy component absolutely to the touch position within the screen, not just the view.
import React, { PureComponent } from 'react';
import { ScrollView, Text, TouchableOpacity } from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';
export default class Test extends PureComponent {
state = {
scrollEnabled: true,
data: [
{ label: '1', key: '1' },
{ label: '2', key: '2' },
{ label: '3', key: '3' },
{ label: '4', key: '4' },
],
};
renderItem = ({
item, isActive, index, move, moveEnd,
}) => (
<TouchableOpacity
activeOpacity={0.9}
style={{
flex: 1,
alignItems: 'center',
height: 60,
borderColor: isActive ? 'white' : 'black',
borderWidth: 2,
}}
onLongPress={move}
onPressOut={moveEnd}
>
<Text style={{ fontSize: 30, color: 'white' }}>
{item.label}
</Text>
</TouchableOpacity>
);
render() {
return (
<ScrollView
style={{ backgroundColor: '#000' }}
contentContainerStyle={{ paddingTop: 800, paddingBottom: 100 }}
scrollEnabled={this.state.scrollEnabled}
>
<DraggableFlatList
scrollPercent={5}
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={item => `draggable-item-${item.key}`}
onMoveBegin={() => this.setState({ scrollEnabled: false })}
onMoveEnd={({ data }) => {
this.setState({ scrollEnabled: true, data });
}}
/>
</ScrollView>
);
}
}
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 20
- Comments: 26 (3 by maintainers)
I have a proposed fix that works for me. It adds an optional prop called scrollingContainerOffset that allows us to inject the offset of the surrounding scrollview container. Starting on onStartShouldSetPanResponderCapture line 88:
To calculate it properly you’d need to setup a scrollview with the following setup in the app itself so that your app will pass the prop to Draggable Flatlist.
fixed in v3. see example of nested scrollview: https://snack.expo.dev/@computerjazz/rndfl-nested-scrollview-example
Hello, has the solution been implemented?
I’d be open to adding a container offset prop, but it should be a reanimated
Animated.Value
, not anumber
for optimal performanceI am having the same problem, implemented the recommended fix (thanks @spacewaffle), but still have an issue with the offset. It works correctly until I scroll down, then the rows appear offset by about 3 rows above where the drag and drop is actually occuring. Here is an excerpt of my code, maybe someone can see where i’ve gone wrong. Cheers!