Using in a ScrollView about react-native-sortable-grid

[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}>

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

[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.

[coolsou]

thanks for sharing

[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!

[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.