CODEWITHSUNDEEP
react-nativereact-native-flatlist
Ibtsam Ahmad
Ibtsam Ahmad

Reputation: 421

How to use ActivityIndicator with FlatList in react-native?

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>
)

Upvotes: 0

Views: 1871

Answers (1)

ucup
ucup

Reputation: 685

<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();
      }}
    />
  }
/>

Upvotes: 2

Related Questions