There seems to be a bug in React Native 0.32. The following code works fine at 0.20 and 0.24, as you can see in the RN Play link.
https://rnplay.org/apps/W5k6Xg
'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { AppRegistry, ListView, StyleSheet, Text, View, Image } = ReactNative; var GridLayoutExample = React.createClass({ getInitialState: function() { var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return { dataSource: ds.cloneWithRows([ { name: 'John', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619232-84.png' }, { name: 'Joel', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619230-84.png' }, { name: 'James', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619168-84.png' }, { name: 'Jimmy', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619130-84.png' }, { name: 'Jackson', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619098-84.png' }, { name: 'Jillian', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/618793-84.png' }, { name: 'Julie', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/618803-84.png' }, { name: 'Devin', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/618706-84.png' } ]) }; }, render: function() { return ( // ListView wraps ScrollView and so takes on its properties. // With that in mind you can use the ScrollView contentContainerStyle prop to style the items. <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={this._renderRow} /> ); }, _renderRow: function(rowData: string, sectionID: number, rowID: number) { return ( <View> <View style={styles.row}> <Image style={styles.thumb} source={{uri: rowData.image}} /> <Text style={styles.text}> {rowData.name} </Text> </View> </View> ); } }); var styles = StyleSheet.create({ list: { justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap', backgroundColor: "blue" }, row: { justifyContent: 'center', padding: 5, width: 100, height: 100, backgroundColor: '#F6F6F6', borderWidth: 1, borderColor: '#CCC', alignItems: 'center' }, thumb: { width: 64, height: 64 }, text: { marginTop: 5, fontWeight: 'bold' } }); AppRegistry.registerComponent('SampleApp', () => GridLayoutExample);
Expected result (as you see in RNPlay w / response native 0.24.1):
What I see (React native 0.32):
Please help me figure this out.