Warning: Empty section headers will be rendered - React Native

Question

I am making a simple ListView by fetching books details from an API. The app runs well but I get a warning and some ReferenceError. You can have a look at the error here. I have also provided the code below.

Code for index.android.js:

import React, {Component} from 'react';
import {StyleSheet,Image,View,ListView,AppRegistry} from 'react-native';
import BookItem from './BookItem.js';


class dhrumil extends Component{


constructor(){
  super();
    var ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2});
  this.state={
    dataSource: ds.cloneWithRows([])
  }
}


componentDidMount(){
fetch('http://api.nytimes.com/svc/books/v3/lists/hardcover-fiction?response-format=json&api-key=73b19491b83909c7e07016f4bb4644f9:2:60667290')
.then((response) => response.json())
.then((rjson) => {
this.setState({
  dataSource: ds.cloneWithRows(rjson.results.books)
});
})
.catch((error)=>{
  console.warn(error);
});
}


render(){
  return(
<ListView style={styles.container}
dataSource= {this.state.dataSource}
renderRow={(rowData)=> {
return <BookItem style={styles.row}
coverURL={rowData.book_image}
title={rowData.title}
author={rowData.author}
/>;
}
}
/>

);
}


}
var styles = StyleSheet.create({
container: {
flex: 1,

backgroundColor: '#FFFFFF',
paddingTop: 24
},
row: {
flex: 1,
height: 44,
fontSize: 24,
padding: 42,
borderWidth: 1,
borderColor: '#DDDDDD'
}
});


AppRegistry.registerComponent('dhrumil',()=> dhrumil);

Code for BookItem.js:

import React,{Component} from 'react';
import {StyleSheet,View,Text,Image,AppRegistry} from 'react-native';

class BookItem extends Component{
propTypes:{
  coverURL: React.PropTypes.string.isRequired,
  author: React.PropTypes.string.isRequired,
  title: React.PropTypes.string.isRequired
}

render(){
return(
<View style={styles.bookItem}>
<Image style={styles.cover} source={this.props.coverURL}/>
<View style={styles.info}>
<Text style={styles.author}>{this.props.author}</Text>
<Text style={styles.title}>{this.props.title}</Text>
</View>
</View>
  );
}


}
var styles = StyleSheet.create({
  bookItem:{
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#FFFFFF',
    borderBottomColor: '#AAAAAA',
    borderBottomWidth: 2,
  },
  cover:{
    flex: 1,
    height: 150,
    resizeMode: 'contain'
  },
  info:{
    flex: 3,
    alignItems: 'flex-end',
    flexDirection: 'column',
    alignSelf: 'center',
    padding: 20
  },
  author:{
    fontSize: 18
  },
  title:{
    fontSize: 18,
    fontWeight: 'bold'
  }
});
AppRegistry.registerComponent("BookItem",()=> BookItem);

What could possibly be wrong and how do I solve it?

Answer 1

Well the warning already say it all. Just add enableEmptySections to your listview component and the warning is gone.