loading icon on the bottom when loadMoreAsync works

[TarekSalahUddinMahmud]

I want to show loading icon on the bottom when loadMoreAsync works

Is it possible with this?

[HugoCerdeiraSkrey]

It should be simple, you can set a flag to true on your state at the beginning of the loadMoreAsync function, and to false when it reaches its end. In the render function if that flag is true you render the loading icon!

Hopefully, I helped, good luck!

[dzpt]

@HugoCerdeiraSkrey what's flag? I've tried to set this.state.isLoading = true but didn't see any loading indicator showed

[dimaportenko]

I'm using following <ListView dataSource={this.dataSource} renderRow={this.renderRow} renderScrollComponent={props => <InfiniteScrollView {...props} />} canLoadMore={this.props.canLoadMoreContent} onLoadMoreAsync={this.loadMoreContentAsync} />

loadMoreContentAsync is invoked, but I don't see any activity indicator. Am I doing something wrong?

[hqtoan94]

@troublediehard I think you're right based on the document. But the problem might be because ListView won't render when your rowData is the same (at the end of the list, number of rows is the same until onLoadMoreAsync finish). That's what i think, i'm not sure about that also.

And my solution for that is:

• Modify the InfiniteScrollView class:

  class InfiniteScrollViewCustom extends InfiniteScrollView {
  render() {
      let statusIndicator;
  
      //Here is what i did: Instead of waiting for a status to add statusIndicator to the end of this.props.children I added an Indicator element at the end of the children list.
      statusIndicator = React.cloneElement(
          this.props.renderLoadingIndicator(),
          { key: 'loading-indicator' },
      );
  
      if (this.state.isDisplayingError) {
          statusIndicator = React.cloneElement(
              this.props.renderLoadingErrorIndicator(
                  { onRetryLoadMore: this._loadMoreAsync }
              ),
              { key: 'loading-error-indicator' },
          );
      }
  
      let {
          renderScrollComponent,
          ...props,
      } = this.props;
      Object.assign(props, {
          onScroll: this._handleScroll,
          children: [this.props.children, statusIndicator],
      });
  
      console.log(props);
  
      return cloneReferencedElement(renderScrollComponent(props), {
          ref: component => { this._scrollComponent = component; },
      });
  }
  }

• Set renderLoadingIndicator property and use the flag in here:

  <ListView
    renderScrollComponent={props => <InfiniteScrollViewCustom renderLoadingIndicator={() => this.state.loading ? <ActivityIndicator style={{ marginTop: 10 }}/> : <View/>} {...props} />}
    dataSource={...}
    renderRow={...}
    canLoadMore={...}
    onLoadMoreAsync={...} />

So that we always have a child at the end of this.props.children and the Indicator will appear when the flag is true.

Here is my first solution, that might be a trick than a solution, but hope that helps somebody.