diff --git a/components/ListView.js b/components/ListView.js index 722a14b3..41e6475c 100644 --- a/components/ListView.js +++ b/components/ListView.js @@ -183,7 +183,7 @@ class ListView extends PureComponent { // if list is empty, show empty placeholder if (!ListEmptyComponent) { - mappedProps.ListEmptyComponent = EmptyListImage; + mappedProps.ListEmptyComponent = this.renderListEmptyComponent(); } // refresh control @@ -281,6 +281,20 @@ class ListView extends PureComponent { ); } + renderListEmptyComponent() { + const { ListEmptyComponent, loading } = this.props + + if (loading) { + return null; + } + + if (ListEmptyComponent) { + return ; + } + + + } + renderRefreshControl() { const { style } = this.props; const { status } = this.state; @@ -300,7 +314,13 @@ class ListView extends PureComponent { } render() { - const { sections, hasFeaturedItem } = this.props; + const { sections, hasFeaturedItem, ListEmptyComponent, loading } = this.props; + + /* ListEmptyComponent in SectionList is handled differently due to the known issue with empty data interpretation. + https://github.com/facebook/react-native/issues/14721 */ + if (sections && _.every(sections, (section) => _.isEmpty(section.data)) && !loading) { + return ListEmptyComponent ? : ; + } if (sections || hasFeaturedItem) { return ; diff --git a/package.json b/package.json index ecc3c67b..a306398c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@shoutem/ui", - "version": "4.0.13", + "version": "4.0.14", "description": "Styleable set of components for React Native applications", "dependencies": { "@shoutem/animation": "~0.12.4",