Can not make it work with scroll view

[mck159]

Hi,

Could you provide example how to configure component property?

Right now I'm setting scrollEnabled property of ScrollView to false onDragStart and to true onDragRelease (by setting stateProperty in those methods)

In most cases it does a trick, but sometimes when I try to scroll to fast (and looks like component wasn't updated yet) it tries to scroll and drag in same time and I need to touch item once again to be able to move it

I'll try to attach video tomorrow

[pedromartins-tk]

I perfectly understand! I had the same problem.

To fix this, i had to insert inside the node_module another action to instead of activating the onDragStart on the dragging movement, to start it on the longPress action.

The problem is that disabling scroll state is not fast enough to do it onDragStart, and when it does the cursor/finger is already out of the item.

Right now i have this:

<DraggableGrid
  data={this.state.data}
  renderItem={this.renderItem}
  onDragWillStart={this.onMoveBegin} //added this line
  onDragRelease={this.onMoveEnd} 
  />

And inside node_modules/react-native-draggable-grid/built/draggable-grid.js inserted this

_this.setActiveBlock = function (itemIndex) {
    _this.panResponderCapture = true;
    _this.props.onDragWillStart && _this.props.onDragWillStart(); // added this line
    _this.setState({
        activeItemIndex: itemIndex,
    }, function () {
        _this.startDragStartAnimation();
    });
};

This fixed my problem.

[i6mi6]

You can try this:

const [dragging, setDragging] = useState(false)

...


<ScrollView scrollEnabled={!dragging}>
    <DraggableGrid
          ...
          onDragStart={() => setDragging(true)}
          onDragRelease={() => setDragging(false)}
        />
</ScrollView>

[kenmueller]

Has anyone fixed this with a custom component using onResponderStart onResponderMove onResponderEnd to handle dragging? When I drag too fast on it the outer scrollview starts scrolling and no more onResponderMove events are sent.