CODEWITHSUNDEEP
react-nativereact-native-flatlistreact-component
Tony
Tony

Reputation: 394

React Native FlatList ListEmptyComponent always showing even if not empty

I'm browsing through StackOverflow in search of someone experiencing my same issue, however couldn't find much. I'm fetching flatlist data from backend and i need the empty text placeholder component to disappear when flatlist is not empty, however it always stays there and never disappears even when data is correctly fetched in the flatlist. How can i solve this? Ps. When assigning dummy data to the flatlist, this issue does not happen.

         <FlatList
            ListEmptyComponent={() => (<Text style={styles.emptyListText}>No upcoming trips to show.</Text>)}
            data={trips}
            renderItem={({ item }) => <MyTripsPostItem post={item} onPress={() => navigation.navigate("Post Screen")}
            />}
         />

Upvotes: 2

Views: 4755

Answers (2)

Shem Alexis Chavez
Shem Alexis Chavez

Reputation: 474

Use trips.length instead of trips.

// checks if trips size is more than 0
!trips.length && <ListEmptyComponent />

while

// checks if trips is undefined or null
trips && <ListEmptyComponent />

In your case, I presume you set a default value to trips which is an empty array / [], so, it wasn't undefined or null.

Upvotes: 0

yoann84
yoann84

Reputation: 810

What I do is that I check if the query is loading and if it is not then I show my View ListEmptyComponent.

  ListEmptyComponent={
        !isLoading && (
          <View style={styles.containerEmptyList}>
        // things
          </View>
        )
      }

I use react-query which provide a "isLoading" variable but you can do the same in your function query with useState

Edit : Also the function () => is not needed for that props.

Upvotes: 3

Related Questions