react native flex box list scrollable vertical

Solutions on MaxInterview for react native flex box list scrollable vertical by the best coders in the world

showing results for - "react native flex box list scrollable vertical"
Elisa
23 Nov 2017
1You need to use a combination of flexbox, and the knowledge that 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.
2
3var TestCmp = React.createClass({
4    getInitialState: function() {
5      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
6      var data = Array.apply(null, {length: 20}).map(Number.call, Number);
7      return {
8        dataSource: ds.cloneWithRows(data),
9      };
10    },
11
12    render: function() {
13      return (
14        <ListView contentContainerStyle={styles.list}
15          dataSource={this.state.dataSource}
16          renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
17        />
18      );
19    }
20});
21Just a ListView with some dummy data. Note the use of contentContainerStyle. Here's the style object:
22
23var styles = StyleSheet.create({
24    list: {
25        flexDirection: 'row',
26        flexWrap: 'wrap'
27    },
28    item: {
29        backgroundColor: 'red',
30        margin: 3,
31        width: 100
32    }
33});