34

I have a FlatList which is wrapped in a View.

<View {...this._panResponder.panHandlers}>
<FlatList .../>
</View>

the View is a panResponder, so how to disable FlatList's scrolling when onPanResponderGrant triggers.

3 Answers 3

63

The documentation states that a FlatList has the props of a ScrollView:

and thus inherits it's props (as well as those of ScrollView)

If you check the documentation for ScrollView, you'll see that all you need to do is set the scrollEnabled prop to false to disable scrolling. How and where you choose to do this will be up to you since you didn't really post any code. A simple way to handle this would be to use state:

<FlatList
  ...
  scrollEnabled={this.state.scrollEnabled}
/>

// Change the state to the appropriate value in onPanResponderGrant:
// To enable:
this.setState({ scrollEnabled: true })
// To disable:
this.setState({ scrollEnabled: false })
2
  • 5
    I know this props, but it seems doesn't work, i will try again,thank u!
    – cityvoice
    Aug 1, 2017 at 7:36
  • It works on the devices in my case, but not with expo web view. Oct 22, 2020 at 16:22
3

You can save ref to FlatList and call setNativeProps on this ref:

this.flatList.setNativeProps({ scrollEnabled: false })
-11

Use ScrollView instead of View.

1
  • this can still be done by providing scrollEnabled prop in Flatlist Jun 1, 2022 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.