FlatList contentContainerStyle -> justifyContent: 'center' causes issues with scrolling
Its not a bug and you're not doing bad, it is the expected behaviour since you're adding explicit flex
to the container of the ScrollView's
list making it take the overall height
of the screen, hence Scrollable only to the screen's content.
You need to use flexGrow
instead of flex
to solve it
The flex grow factor of a flex item is relative to the size of the other children in the flex-container
<FlatList
contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
//... other props
/>
Comments
-
SmoggeR_js almost 4 years
I have a
FlatList
component where I render x number ofTouchableHighlight
. I need all components in theFlatList
aligned vertically to center.The problem is that if I put
justifyContent: center
incontentContainerStyle
nothing happens but, if I addflex: 1
tocontentContainerStyle
I get the result I want. It is cool if I doesn't have to make scroll, but when I have a number of components in theFlatList
that forces do scroll to see all of it the scroll start in the center of these list and don't let me scroll.These is my code:
<FlatList style = {{flex: 0.7, backgroundColor: 'red'}} data = {this.props.actions} contentContainerStyle = {{justifyContent:'center',}} keyExtractor={(item, index) => index} renderItem = {({item, index})=>{ return ( <TouchableHighlight style = {{alignItems: 'center', margin: 8, paddingTop: 8, paddingBottom: 8, //flex: 1, borderColor: ConstantesString.colorGrisFlojito, backgroundColor: '#d7deeb', borderRadius: 10, }} underlayColor = {ConstantesString.colorAzulTouched} onPress = {()=>{ item.action(); }}> <Text style = {{color: '#005288' , textAlign: 'center', fontSize: 20}} > {item.name} </Text> </TouchableHighlight> ) }} />
I don't know if this is a bug or I am just doing bad.