How to do Refresh in React Native ScrollView with refreshControl?

Question

Now I would like to pull down a scrollView and refresh this component, so I have followed the official document mentioning onRefresh and RefreshContorol from react-native.

However, I don't know why my code is not working and get error...

The code below is my code.

   <View style={styles.container}>
    <ScrollView
      contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}
      refreshControl={<RefreshControl refreshing={this.state.refreshing}  onRefresh={this.setState({ refreshing: true })} />}
    >
      {this.renderItemBox()}
    </ScrollView>
  </View>

Answer 1

Below is the sample code in which you can find RefreshController integration with ScrollView:

import { ScrollView, RefreshControl } from 'react-native';

class RefreshableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
      />
    );
  }

}

Answer 2

on me it worked

import React from 'react';
import {
  RefreshControl,
  ScrollView,
  StyleSheet,
  View,
} from 'react-native';
import {WebView} from 'react-native-webview';

const wait = timeout => {
  return new Promise(resolve => setTimeout(resolve, timeout));
};

const Main = () => {
  const webViewRef = React.useRef();
  const [refreshing, setRefreshing] = React.useState(false);
  const [enablePTR, setEnablePTR] = React.useState(false);

  
  const onRefresh = React.useCallback(() => {
    webViewRef.current.reload();
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);

  const handleEvent = e => {
    if (e.nativeEvent.contentOffset.y > 100) {
      setEnablePTR(false);
    } else {
      setEnablePTR(true);
    }
  };
  return (
    <View style={styles.container}>
      <ScrollView
        scrollEnabled={false}
        contentContainerStyle={styles.container}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            enabled={enablePTR}
          />
        }
      >
        <WebView
          source={{ uri: "https://example.com/" }}
          ref={(ref) => (webViewRef.current = ref)}
          javaScriptEnabled={true}
          injectedJavaScript="setTimeout(() => {document.addEventListener('scroll', function (event) {window.ReactNativeWebView.postMessage(JSON.stringify(document.getElementsByClassName('topconteiner')[0].scrollTop));},true);}, 300);true;"
          onScroll={(event) => handleEvent(event)}
        />
      </ScrollView>
    </View>
  );
};

export default Main;

const styles = StyleSheet.create({
  container: {backgroundColor: '#fff', flex: 1},
});