Ui: Listview OnRefresh spins forever, how do I complete the refresh status

[mypark]

How do I set the refresh status to complete so that the spinner stops and the pull to refresh bounces back?

I implemented the onRefresh function on the ListView property and return a result but it still keeps spinning. I don't see anywhere to finish the refresh and reset the status.

  ```
 <ListView
      data = { results }
      autoHideHeader = { true }
      loading = { isLoading }
      onRefresh = { async () => {
        console.log('refreshing');
        const results = await refetch();
       // we have results data but we are still spinning ,how to finish spinning?
      // fresh data has already been rendered at this point but refresh control still visible
      } }
      renderHeader = { this.renderHeader }
      renderRow= { this.renderRow }
      renderSectionHeader = { this.renderSectionHeader }
      getSectionId = { this.getSectionHeaderId }
    />
```

note that isLoading is a redux connected property set by the apollo client which seems to work fine for the loading spinner, just not the refresh spinner. If I set loading to a state variable instead - it seems to work. Why is that?

[brandon-dewitt]

@mypark I just experienced this issue also. It looks like the ListView state stats goes into 'refreshing', but has no mechanism to come out of refreshing:

https://github.com/shoutem/ui/blob/develop/components/ListView.js#L131

[crpr]

I have the same problem. Any workaround?

[zrumenjak]

You should use the loading prop of the ListView. Setting the loading prop to false will dismiss the spinner.

It could be nice if we also had an option that onRefresh can return a promise, and that the spinner is automatically dismissed when that promise is resolved or rejected. PRs are welcome, if anyone wants to implement that.

[buncis]

anyone have example code for this?,

@zrumenjak how to set the loading props?, isn't props should be immutable?

I think I got this, please comment If I did It wrong,

export default class MembersScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Members`,
  });

  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.state = {
      loading: false,
      restaurants: [{
        "name": "Gaspar Brasserie",
        "address": "185 Sutter St, San Francisco, CA 94109",
        "image": { "url": "https://shoutem.github.io/static/getting-started/restaurant-1.jpg" },
      }, {
        "name": "Chalk Point Kitchen",
        "address": "527 Broome St, New York, NY 10013",
        "image": { "url": "https://shoutem.github.io/static/getting-started/restaurant-2.jpg" },
      }],
    }
  }

  renderRow(restaurant) {
    return (
      <Row>
        <Image
          styleName="small rounded-corners"
          source={{ uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png' }}
        />
        <View styleName="vertical stretch space-between">
          <Subtitle>Wilco Cover David Bowie&#39;s "Space Oddity"</Subtitle>
          <Caption>June 21  ·  20:00</Caption>
        </View>
      </Row>
    );
  }

  render() {
    return (
      <Screen>
        <Button title="loadthespiner" onPress={()=> this.setState({ loading: true })}></Button>
        <Button title="nope" onPress={()=> this.setState({ loading: false })}></Button>        
        <ListView
          data={this.state.restaurants}
          renderRow={this.renderRow}
          onRefresh = {() => this.setState({ loading: true })}
          loading = {this.state.loading}
          onLoadMore = {() => this.setState({ loading: true })}
        />
      </Screen>
    );
  }
}

[zrumenjak]

@buncismamen yes, the idea is to change the loading prop of the ListView based on some external value. Your example should work, but you are now manually controlling the loading status. In a real world use case, you would probably set the loading state value to false when a network request is finished.

[azadious]

Must set to this.setState({loading: true}) before changing to this.setState({loading: false}).

If you just want to try how it works, use this code.

onRefresh() {
console.log('refresh');
this.setState({loading: true}, function () {
this.setState({restaurants: restaurants, loading: false});
});
}