React Native Listview grid layout with Listview elements that align and append independently

Question

I have a problem regarding the alignment of Listview elements that should be displayed in a more boxed style than in a row style. In the picture you can see the current status, which is produced by using this StyleSheet code used in Listview's contentContainerStyle prop:

ListViewStyle: {
  flexDirection: 'row',
  flexWrap: 'wrap',
}

What I want to achieve are wrapped Listview elements without starting a new line after row wrap happened and as a result without having space on the top of of a Listview Element.

Any idea how to achieve this nice and clean? Thank you!

Answer 1

Somebody was trying to do the same thing here. But the basic idea is that you want to set the child elements of the ListView component with different flex value.

Have a look at the following code:

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

class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{
          flex: 1,
          flexDirection: 'column',
        }}>
          <View style={{flex:1, backgroundColor: 'red'}} />
          <View style={{flex: 2, backgroundColor: 'blue'}} />
          <View style={{flex:1, backgroundColor: 'green'}} />
          <View style={{flex:3, backgroundColor: 'grey'}} />
          <View style={{flex: 2, backgroundColor: 'skyblue'}} />

        </View>
        <View style={{
          flex: 1,
          flexDirection: 'column',
        }}>
          <View style={{flex:5, backgroundColor: 'pink'}} />
          <View style={{flex: 2, backgroundColor: 'red'}} />
        </View>
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

Since you want to have two columns of the same width, you have a main view with 2 enclosing views, each with the same flex value. Inside each view, you can then have images of different heights, using different flex values. I'm just hardcoding the components to show you what it looks like on the link below. You would want to replace it with some type of render function that generates dynamic input.

See the code in action here