React Native render function throws error

Ranjith Srikanth Published at Dev

Ranjith Srikanth

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.

bozzmob

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.