Stuck on an issue?

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