Center Align contents of a ListView in react native

Question

I have used a ListView to list some items but they're all left aligned. How to center align them without using another View wrapping the ListView?

Code for the ListView

<ListView
   dataSource={this.state.dataSource}
   renderRow={this.renderItem}
   style={styles.listView}
/>

ListView Styling

listView: {
   paddingTop: 20,
   paddingBottom: 20,
}

How to do this? Thanks in advance.

Answer 1

You can solve this by using the contentContainerStyle ListView prop to apply the needed flexbox styles directly to the ListView's internal container, like so:

<ListView
  dataSource={this.state.dataSource}
  renderRow={this.renderItem}
  contentContainerStyle={styles.listView}
/>

// ...    

var styles = StyleSheet.create({
   listView: {
     flex: 1,
     justifyContent: 'center',
   },
});

Likewise, this also works when you need both axes centered by adding alignItems: 'center' to the listView style.

Answer 2

this.renderItem should be a function which renders the row. Your row should set the styles it needs. So something like this:

<ListView
  dataSource={this.state.dataSource}
  renderRow={this.renderItem}
  style={styles.listView}
/>

renderItem: (item) {
  <ItemRow item={item} />
}

And then in the ItemRow component:

render: () {
  <View style={flexDirection: 'row', justifyContent: 'center'}>
    <Text>{this.props.item.name</Text>
  </View>
}