FlatList contentContainerStyle -> justifyContent: 'center' causes issues with scrolling

Question

I have a FlatList component where I render x number of TouchableHighlight. I need all components in the FlatList aligned vertically to center.

The problem is that if I put justifyContent: center in contentContainerStyle nothing happens but, if I add flex: 1 to contentContainerStyle 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 the FlatList 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.

score 69 · Accepted Answer · answered May 10 '18 at 09:13

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
/>

FlatList contentContainerStyle -> justifyContent: 'center' causes issues with scrolling

1 Answers1