CODEWITHSUNDEEP
react-native
ryonz
ryonz

Reputation: 481

How to do Refresh in React Native ScrollView with refreshControl?

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>

Upvotes: 12

Views: 34460

Answers (3)

putu eka mulyana
putu eka mulyana

Reputation: 443

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

Upvotes: 6

Nirmalsinh Rathod
Nirmalsinh Rathod

Reputation: 5186

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

}

Upvotes: 23

Sujeet Chauhan
Sujeet Chauhan

Reputation: 11

import {ScrollView,RefreshControl,SafeAreaView} from 'react-native';
import React,{useState,useEffect} from 'react';

export default function App({ navigation }) {
const [refreshing,setRefreshing] =useState(false);

useEffect(()=>{
   pullToRefreshFunction() 
},[]}

const pullToRefreshFunction = () => {
     setRefreshing(true)
     ..... your api calling here..
     setRefreshing(false)
}

 return(
 <SafeAreaView style={{flex:1}}>
 <ScrollView  refreshControl={
   <RefreshControl
  refreshing={refreshing}
  onRefresh={pullToRefreshFunction }
/>}
>
</ScrollView>
</SafeAreaView>
}

Upvotes: 1

Related Questions