ListView flex grid not working

[bitsagarob]

If we'd like to use the parallax scroll view as a grid, a basic example can be seen at this SO question, the style is not applied. I believe the flex style applied to ListView somehow gets overwritten by the parallax view. This is a simplified setup:

<ListView
  ref="ListView"
  contentContainerStyle={styles.list}
  dataSource={this.state.dataSource}
  renderRow={this.renderCategories}
  renderScrollComponent={props => (
<ParallaxScrollView
    ...

On the stylesheet:

list: {
  flexDirection: 'row',
  flexWrap: 'wrap'
},
item: {
  fontSize: 18,
  margin: 5,
  width: 100
}

Is this a bug? How could we get a flex grid working within the render row of the parallax view? Thank you.

[alaycock]

My pull request resolves this issue, it allows you to specify the property contentContainerStyle on the <ParallaxScrollView>. Which you can see in my fork's test branch.

      <ListView
        ref="ListView"
        style={styles.container}
        dataSource={ this.state.dataSource }
        renderRow={(rowData) => (
          <View key={rowData} style={ styles.row }>
            <Text style={ styles.rowText }>
              { rowData }
            </Text>
          </View>
         )}
        renderScrollComponent={props => (
          <ParallaxScrollView
            onScroll={onScroll}

            headerBackgroundColor="#333"
            stickyHeaderHeight={ STICKY_HEADER_HEIGHT }
            parallaxHeaderHeight={ PARALLAX_HEADER_HEIGHT }
            backgroundSpeed={10}
            contentContainerStyle={styles.contentContainer}

            renderBackground={() => (
            ...