Draggable Flatlist inside a ScrollView doesn't account for scrolled offset

[samjt]

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>
    );
  }
}

[computerjazz]

hm yeah, nested scrollable items get really tricky. this wasn't a use case I had in mind.

[holgersindbaek]

@samjt Did you figure out a solution for this?

[samjt]

No, afraid not, I redesigned to avoid it

[kanthi0802]

What's the suggested approach for this? this issue is breaking our design

[jerryheir]

Any solution yet?

[mittermayr]

I have the same issue, and I wonder if this means the component only works if your list is never longer than a screen's height? Or did I misinterpret that? I have a:

 View (flex:1)
   ScrollView
      DraggableFlatList
      something else
      FlatList
   /ScrollView
 /View

I see that exact same issue others have mentioned above. Is there a way we can inject the scroll offset from the parent scroll view somewhere in your code? I am happy to adjust the library, but you probably know best where that offset would/should go, no? Your library improves on react-native-sortable-list because you're using FlatList and performance seems much better.

Thanks!

[spacewaffle]

@samjt could you elaborate on your redesign solution?

[samjt]

I meant I moved the draggable list to a different separate screen

[spacewaffle]

Ahh fair ok.

[spacewaffle]

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:

if (this.props.scrollingContainerOffset !== undefined) {
    this._offset.setValue((this._additionalOffset + this._containerOffset - this.props.scrollingContainerOffset - this._androidStatusBarOffset) * -1)
} else {
    this._offset.setValue((this._additionalOffset + this._containerOffset - this._androidStatusBarOffset) * -1)
}

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.

state = {
    ...
    scrollOffset: 0,
    ...
};

render() {
    return (
        <ScrollView
            onScrollEndDrag={({ nativeEvent }) => { this.setState({ scrollOffset: nativeEvent.contentOffset['y'] }); }}
            onMomentumScrollEnd={({ nativeEvent }) => { this.setState({scrollOffset: nativeEvent.contentOffset['y']}); }}
        >
            <DraggableFlatList
                ...
                scrollingContainerOffset={this.state.scrollOffset}
                ...
            />
       </ScrollView>
    );
}

[hamid]

@spacewaffle wow, it works for me.tnx

[cupcakearmy]

@spacewaffle you saved my day ❤️