How to do Refresh in React Native ScrollView with refreshControl? - react-native

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},
});