React Native refresh data async call, array not rendering-CodePudding

I am refreshing data for my app, and passing a refreshing prop down.

How can I show nothing while refresh is true and the documents array is being rendered. Only showing 'No documents available', when refreshing is false and documents array has rendered?

const DocumentsListWidget = ({ refreshing }) => {

  const {
    documents: { documents },
    policy: {
      policyInfo: { PolicyId },
    },
  } = useSelector((state) => state);
  return (
    <SecureAreaWrapper
      ...
    >
      {documents.length > 0 ? (
        <FlatList
          scrollEnabled={false}
          data={documents}
          ListHeaderComponent={Header}
          renderItem={({ item }) => (
            <Item
              ...
            />
          )}
        />
      ) : (
        <Text style={documentsListings.noDocuments}>
          No documents available
        </Text>
      )}
    </SecureAreaWrapper>
  );
};

CodePudding user response：

use return when refreshing is true

const DocumentsListWidget = ({ refreshing }) => {

  const {
    documents: { documents },
    policy: {
      policyInfo: { PolicyId },
    },
  } = useSelector((state) => state);

  if(refreshing) return null

  return (
    <SecureAreaWrapper
      ...
    >
      {documents.length > 0 ? (
        <FlatList
          scrollEnabled={false}
          data={documents}
          ListHeaderComponent={Header}
          renderItem={({ item }) => (
            <Item
              ...
            />
          )}
        />
      ) : (
        <Text style={documentsListings.noDocuments}>
          No documents available
        </Text>
      )}
    </SecureAreaWrapper>
  );
};

CodePudding user response：

You can use the refreshing prop to show a loading indicator while the data is being refreshed, and only show the "No documents available" message if refreshing is false and the documents array is empty.

Here is an example of how you could do this:

const DocumentsListWidget = ({ refreshing }) => {
const {
documents: { documents },
policy: {
  policyInfo: { PolicyId },
},
} = useSelector((state) => state);

if (refreshing) {
return <ActivityIndicator />;
}

return (
<SecureAreaWrapper>
  {documents.length > 0 ? (
    <FlatList
      scrollEnabled={false}
      data={documents}
      ListHeaderComponent={Header}
      renderItem={({ item }) => (
        <Item
          ...
        />
      )}
    />
  ) : (
    <Text style={documentsListings.noDocuments}>
      No documents available
    </Text>
  )}
 </SecureAreaWrapper>
 );
};

In this example, the DocumentsListWidget component checks the refreshing prop to determine whether to show a loading indicator or the list of documents. If refreshing is true, the component will show the ActivityIndicator component. Otherwise, it will show the list of documents if it is not empty, or the "No documents available" message if it is empty.