React Native - Activity Indicator while FlatList loads images

Question

Whenever my app mounts, I have set:

constructor(props) {
    super(props);
    this.state = {
        loading: true
    };
}

I have an activity indicator which animates until loading: false:

{this.state.loading &&
    <View style={styles.loading}>
         <ActivityIndicator color="red" animating={this.state.loading} />
    </View>
}

I tried searching inside FlatList's documentation for a method would tell me if all items have been rendered so I can call this.setState({loading: false}); However, I did not manage to find such method.

Does anyone know how can I display my activity indicator whilst the list is loading its data?

Answer 1

Your problem is not react native related. Which is why you couldn't find any help regarding it in the react native documentation.

Assuming that your data is coming in asynchronously and in reference to your question you are not able to figure out when this asynchronous operation ends.

Use promises or async await or any other functionality like that, to figure out when this asynchronous operation ends and then use setState to disable the activity indicator and then show the flatList.

Let me know if you need more explanation or clarity on the above said.