Using in a ScrollView

[indivisable]

If anyone else is using in a ScrollView this might help you. Mainly you have to lock and unlock the scrollview's "scrollEnabled" property.

<ScrollView
    ref='myScrollView'
...

Callback

  setLockGrid(mode) {
    this.refs.myScrollView.setNativeProps({ scrollEnabled: mode });
  }

Pass down this callback to your Sortable Grid implementation:

<FavoritesGrid setLock={this.setLockGrid.bind(this)} style={{flex:1}}/>

Then when you setup your Sortable Grid you need to set the callbacks:

<SortableGrid
          onDragEnd  = { this.onDragEnd.bind(this) }
          onDragStart  = { this.onDragStart.bind(this) }
...

  onDragStart(){
    this.props.setLock(false);
  }

  onDragEnd(){
    this.props.setLock(true);
  }

[coolsou]

thanks for sharing

[DanielMartini]

Idk if it has changed but I achieved it just with:

constructor(props) { super(props); this.state = { scrollEnabled: true, }

then in the SortableGrid:

onDragRelease = {() => {this.setState({scrollEnabled: true})}} onDragStart = {() => {this.setState({scrollEnabled: false})}}

and finally attach the state to the ScrollView

<ScrollView scrollEnabled={this.state.scrollEnabled}>

[sam-tse]

The solution provided by @DanielMartini works as well. Thanks!

[eduardojunio]

@sam-tse are you sure? I tried here but when I try to drag the block it doesn't move, and when I release the startup grid animation is executed.

[eduardojunio]

@indivisable what component FavoritesGrid is this? A SortableGrid children?

[dmkerfont]

@DanielMartini Worked perfectly! Thanks!

[geminiyellow]

should merge this into README, this lib need more good document.

[QShengW]

@DanielMartini This is not applicable. If there is a delete function, it can not be dragged after deleting.

[QShengW]

The latest solution combined with @indivisable 's answers. <ScrollView ref='myScrollView' ... onDrag(bool) { this.refs.myScrollView.setNativeProps({ scrollEnabled: bool }); } onDragStart={() => { this.onDrag(false) }} onDragRelease={(itemOrder) => { this.onDrag(true) }}

[midimurphdesigns]

The mentioned solutions work great except for one aspect I am struggling to find a solution for. If the user holds to drag the tile and doesn't move it before releasing, onDragRelease never fires and the page is stuck with scrolling disabled. Does anyone have a solution for this edge case?

[midimurphdesigns]

I found an ok solution by wrapping each child element in your grid with a touchableWithoutFeedback, and use the onPressIn and onPressOut handlers to toggle scrollingEnabled in the scrollview via setState.