javascriptreact-nativereact-native-flatlist

React-Native flat list pull to refresh not showing


I am working on pulling flatlist and refresh with the header. When it comes to execution, the spinner does not show up. Please tell me what do I have to fix. Do we need to use Refresh Control?

Environment

react-native-cli: 2.0.1

react-native: 0.52.0

node : v8.9.4

class ListSwipe extends Component {

  constructor(props) {
    super(props);
    this.state = { keywords: "", isLoading: true , results:[] , oldresults:[] , isFetching: false }     
  }

  componentDidMount() { 
    return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          isFetching: false  ,
          results: responseJson,
          oldresults: responseJson
        },...

makeRemoteRequest() {
....
}

handleRefresh = () => {

  this.setState({ isFetching: true }, function() {
    this.makeRemoteRequest()
  });

}


 ....
              <ScrollView style={styles.scroll}>


        <Text> Keywords : {this.state.keywords} </Text>



               {this.state.loading ? (
                <Spinner />
          ) :  <FlatList 
                 extraData={this.state}
                data={this.state.results}
                keyExtractor={(item, index) => item.id}
                renderItem={( {item} ) => {
                    return <ListItem>

                      <Text>{item.fruit_name}</Text>

                  </ListItem>
                  }}  
                  refreshing = {this.state.isFetching}                
                  onRefresh ={this.handleRefresh}
                  onRefresh={() => this.onRefresh()}

         /> }

        </ScrollView> 

Solution

  • Worked. Add enabled={true}

              refreshControl={
                <RefreshControl
                  enabled={true}
                  refreshing={refreshing}
                  onRefresh={onRefresh}
                />
              }