Flex row wrap over ScrollView broken on RN-0.29-rc.2

[avishayil]

On RN-0.28 The following code works great, I can scroll until the bottom.
On RN-0.29 I cannot scroll, only bounce:

import React, {Component} from 'react';
import {AppRegistry, View, ScrollView, Text, Dimensions} from 'react-native';

var {width} = Dimensions.get('window');

export default class Test extends Component {
    render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    {['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16'].map((value) => {
                        return (
                                <View style={styles.item} key={value}>
                                    <Text>{value}</Text>
                                </View>
                        );
                    })}
                </View>
            </ScrollView>
        );
    }
}

const styles = {
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        width: width / 2,
        height: 200,
        backgroundColor: 'green',
        justifyContent: 'center',
        alignItems: 'center'
    },
    text: {
        color: '#ffffff'
    }
};

AppRegistry.registerComponent('Test', () => Test);

[satya164]

Not sure if you can use flex: 1 in a component inside scroll view. Try removing it.

@facebook-github-bot stack-overflow

[avishayil]

Tried, Still doesn't work.
On RN 0.28 Works great as expected.

[bestander]

In 0.29 we turned on new css-layout implementation.
Could you try setting flex-start on the parent?

[avishayil]

@bestander Do you mean setting justifyContent: 'flex-start' on the ScrollView via contentContainerStyle prop? it seems not to work.

By the way, changing container styles to flexDirection: 'column' works great, it seems like a problem with the flexWrap style prop and it's combination with ScrollView.

[chirag04]

There is breaking change in 28. Try adding alignItems

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.

Refer:
https://github.com/facebook/react-native/releases/tag/v0.28.0

[avishayil]

Works great, thanks!

[chirag04]

@facebook-github-bot close

[ghost]

@chirag04 tells me to close this issue. If you think it should still be opened let us know why.