Flex row wrap over ScrollView broken on RN-0.29-rc.2
See original GitHub issueOn 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);
Issue Analytics
- State:
- Created 7 years ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
React Native: Scrollview won't scroll with row direction and ...
in my react-native app I have a scrollview where my list items are row wrapped (flexDirection:'row',flexWrap:'wrap'), however because of ...
Read more >Taming React Native's ScrollView with flex | by Peter Piekarczyk
In React Native, on the other hand, flex consumes a number, not an string and it works like this: positive number — component...
Read more >ScrollView with flex - Expo Snack
As you can see as long ScrollView has flex 1 style, that scroll inside the SrollView doesn't work! (and It must be with...
Read more >A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. ... flex-wrap. two rows of boxes, the first wrapping down onto the second.
Read more >ScrollView's scrollers go away when setting flex-direction to row
I'm changing a ScrollView's content container's flex-direction to row and the scroller goes away. Even changing it's flex-wrap to wrap makes ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
There is breaking change in 28. Try adding
alignItems
Refer: https://github.com/facebook/react-native/releases/tag/v0.28.0
Works great, thanks!