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