Apoorv Parijat Apoorv Parijat - 3 months ago 224
React JSX Question

React Native Grid View: Flexbox wrap not working

There seems to be a bug in React Native 0.32. The following code is working fine in 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's 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 Output (as you see on RNPlay w/ react native 0.24.1):

Expected result

What I'm seeing (React native 0.32):

Wrong result. Can only see 3 cells and rest of them aren't wrapping

Please help me figure this out.

Answer

You should add alignItems: 'flex-start' to your list's style.

list: {
  justifyContent: 'center',
  flexDirection: 'row',
  flexWrap: 'wrap',
  alignItems: 'flex-start',
  backgroundColor: "blue"
},

There was a breaking change in React Native 0.28 that changed the behaviour of flex-wrap:

Due to performance tweaks flexWrap: wrap no longer works together with alignItems: 'stretch' (the default). If you use flexWrap: wrap you probably will want to add the alignItems: 'flex-start' style as well.

Comments