How to use ActivityIndicator with FlatList in react-native?

Question

I have a FlatList component that has refreshControl prop that uses RefreshControl to handle refresh. How can I use ActivityIndicator instead of RefreshControl here.

return (
  <View style={styles.container}>
    <FlatList
      data={data}
      renderItem={({ item }) => {
        return renderData(item);
      }}
      refreshControl={
        <RefreshControl
          colors={["#9Bd35A", "#689F38"]}
          refreshing={loading}
          onRefresh={loadData()}
        />
      }
      keyExtractor={(item) => `${item.id}`}
    />
    <FAB
      style={styles.fab}
      small={false}
      icon="plus"
      onPress={() => navigation.navigate("Create")}
    />
  </View>
) 

Answer 1

<Flatlist
  data={data}
  renderItem={({ item }) => {
    return renderData(item);
  }}
  ListEmptyComponent={() => {
    if (loading) {
      return <ActivityIndicator animating size="large" color="red" />;
    }
    return <Text>data is empty</Text>;
  }}
  refreshControl={
    <RefreshControl
      colors={["#9Bd35A", "#689F38"]}
      refreshing={loading}
      progressViewOffset={loading ? -200 : 0}
      onRefresh={() => {
        setData(null);
        loadData();
      }}
    />
  }
/>