Dynamically set scrollEnabled to False in RN ScrollView

Question

How can I change the bool value of scrollEnabled param of React Native ScrollView when scrolling reaches a certain position?

I do have a ScrollView inside a ScrollView, and the inner ScrollView doesn't respond because of the outer ScrollView. Inner ScrollView works when scrollEnabled param is set to False of outer ScrollView. My idea is to dynamically set outer ScrollView to scrollEnabled={false} when reaches at the bottom. How do I do this.

Thanks,

Answer 1

There are two ways to accomplish this. The first one, as described by @binchik, is to set scrollEnabled to a state variable and update the state when necessary. Of course, this triggers a re-render, which can be problematic. The second way is to update the prop on the ScrollView component directly without re-rendering. You can do it like this:

class DisableScrollWithoutRerender extends React.Component {
  listRef = React.createRef();
  ...
  render() {
    return <ScrollView ref={this.listRef} />;
  }

  disableScroll() {
    const { current: list } = this.listRef;
    list.setNativeProps({ scrollEnabled: false });
  }
}

Personally I would recommend to stick to the first option when a re-render is affordable and avoid the second one unless it's exactly what you need.

Answer 2

Provide a ref to your scrollview/listview. and then use following to change scrollEnabled value.

render() {
  return <ScrollView ref="scrollView" />;
}

onSomeEvent() {
  this.refs.scrollView.setScrollEnabled(true); // will enable scroll
}