If you want to show an activity indicator at the end of a ListView in React-Native? You should be able to achieve that by using the onEndReached prop for A ListView. When you reach the end you can render the loader. In my case I used renderFooter to render the loader at the bottom of the list. In my scenario
You can set in the component state an attribute called messagesLoading that you set to true when you start fetching new data and to false when done. Based on that, you can display or not the loading indicator in the footer.
This example partial implementation should give you an idea of how you can do it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | class ThreadDetail extends React.Component { constructor () { super() this.state = { loading: false } } loadMoreMessages () { this.setState({ loading: true }) fetchMessagesFromApi() .then(() => { this.setState({ loading: false }) }) .catch(() => { this.setState({ loading: false }) }) } renderFooter () { return this.state.loading ? <View><Text>Loading...</Text></View> : null } render () { return <ListView renderRow={message => <Message message={message}/>} dataSource={this.state.dataSource} renderFooter={this.renderFooter.bind(this)} onEndReached={this.loadMoreMessages.bind(this)} onEndReachedThreshold={10} scrollEventThrottle={150} /> } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
