Animation stops when using in footer of ListView

[Naoto-Ida]

I love this library btw.
I have a <ListView> which loads more content when it reaches the bottom(end).

renderFooter() {
  if (noMore) return null
  return (
    <View style={{justifyContent: 'center', alignItems: 'center', height: 50}}>
      <Progress.Circle
        size={20}
        indeterminate={true}
        color={"#000"} />
    </View>
  )
}

render() {
  return (
  <ListView
    style={{flex: 1}}
    refreshControl={
      <RefreshControl
        ...
      />
    }
    onEndReached={this.loadMore.bind(this)}
    onEndReachedThreshold={10}
    scrollEventThrottle={150}
    dataSource={new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }).cloneWithRows(articles)}
    ...     
    renderFooter={this.renderFooter.bind(this)} />
  )
}

When it reaches the bottom, the animation on it stops or goes to a crawl.
I've tested this on an iPhone 5S, iPhone 7 simulator, and Nexus 6P.

[DylanVann]

The issue is probable that onEndReached probably locks up the JS thread a bit.
Animation in react-native-progress is done on the JS thread so anything slowing it down
will cause the animations to stutter. This should be addressed by offloading the animations
using native / declarative animation.

[Naoto-Ida]

Thanks for the suggestion. Since I didn't really need to indicate actual "progress", I opted to use react-native-spinkit.

[MrHubble]

@Naoto-Ida are you able to confirm that with using react-native spinner you don't need to go down the path of offloading the animations using native / declarative animation?