Center the grid inside the view

Question

I am creating a grid with a ListView. This is my code.

export default class CategoryContainer2 extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3','row 4','row 5']),
    };
  }

  render() {
    return (
      <View style={{         
        backgroundColor:'#ebeef0',
        alignItems:'center',
        justifyContent:'center'}}>
      <ListView contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
        />
        </View>
    );
  }
}

and this is the result

As you can see in my code, I am trying to center the grid on the screen, but this does not work. Do you have an idea on how to do this?

EDIT:

If there is only one row on the grid and the view is centered

If I increase the size of the elements and the grid contains more than one row, the central dose will no longer work

EDIT:

Here with this problem s snack .

Answer 1

I believe the problem is with the width ListViewequal to the width of the container View. I have 2 ideas on how to achieve the desired behavior.

paddingLeft paddingRight View ListView.

- ListView style justifyContent: 'space-between' justifyContent: 'space-around'. , , . , .

, width . , .

-