React Native render function throws error

Question

Here is my render function of react native. if i put listview it works. if i put touchablehighlight it works. but, if it put both it doesn't work. need help.

render: function() {
    return (
      /* ListView wraps ScrollView and so takes on its properties.
       With that in mind you can use the ScrollView's contentContainerStyle prop to style the items.*/
        <ListView
          contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}/>
        <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor="transparent">
        </TouchableHighlight>
    );
},

what is wrong here? need both components to work.

Answer 1

You can't have 2 tags that you can return. You should wrap it inside a <View> </View> tag. This way you can abstract multiple components that you need in the page.

render: function() {
    return (
      /* ListView wraps ScrollView and so takes on its properties.
       With that in mind you can use the ScrollView's contentContainerStyle prop to style the items.*/
      <View>  
        <ListView
          contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}/>
        <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor="transparent">
        </TouchableHighlight>
      </View>
    );
},

Hope it helps.