show message if listview is empty react native - react-native

Question

If List View is empty, I would like to show the header(Which is happening) and also show a alternate Text saying "List is Empty".
I tried doing getRowCount(), which returns 0. But how can I insert the text in the same view.
`
<Image source={require('./img/background.png')} style={GlobalStyles.bgImageContainer}>
<ListView style={{margin: 5}}
initialListSize={10}
dataSource={this.state.familydataSource}
renderRow={this.renderRow}
renderSeparator={::this._renderSeparator}
renderSectionHeader={this.renderFamilySectionHeader}
enableEmptySections={true}
/>
<ListView style={{margin: 5}}
dataSource={this.state.friendsdataSource}
renderRow={this.renderRow}
renderSeparator={::this._renderSeparator}
renderSectionHeader={this.renderFriendsSectionHeader}
enableEmptySections={true}
/>
</Image>
`

Answer 1

I initially misunderstood what you meant by header, thinking it was a component separate from the ListView. To show a separate message in addition to the ListView (instead of as a replacement to it), I would use the flex style to determine whether the ListView should take up the full height or just a percentage. In that later case you can render your message below the ListView so that both appear.
You can separate the rendering of the ListView and message into two functions like so:
_renderMessage() {
return (
<View style={{ flex:0.5 }}>
<Text>List is Empty</Text>
</View>
)
}
render() {
const listViewProportion = this.state.dataSource.getRowCount() == 0 ? 0.5 : 1
return (
<View style={{ flex:1 }}>
<ListView
style={{ flex: listViewProportion }}
...
/>
{if (listViewProportion != 1) {
this._renderMessage()
}}
</View>
)
}

Answer 2

Maybe this could help in order to give you an idea for what you want. Have you tried something like this?
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([]),
}
}
renderIf(condition){
if(condition){
return (<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>} />)
} else{
return (<Text> There is no data </Text>)
}
}
componentDidMount(){
var datos = ['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin']
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({dataSource: ds.cloneWithRows(datos)})
}
render(){
return(
{this.renderIf(this.state.dataSource.getRowCount())}
);
}
In this example, I imagine that we start with 0 elements in the array. So the constructor runs first, and then I declare my dataSource has 0 elements. After this, render methods is executed. As there are 0 elements, when we call to renderIf it will return the second part of the if statement. Once render method is finished, then componentDidMount method will be called to and in this method we will do all the operations in order to retrieve our data from our server o whatever. Once this method ends, our dataSource will have information, so it will render the ListView with all our information.

Answer 3

In the ListViewDataSource there is a property _cachedRowCount which holds a number with total rows of a ListView
Here is an example of how you could handle an empty ListView message:
render() {
return (
<View style={styles.listViewContainer}>
{this.state.dataSource._cachedRowCount > 0 // condition
? // if true
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
>
</ListView>
: // if false
<Text>Nothing found</Text>
}
</View>
)
}