FlatList not scrolling

Simply do following steps to get FlatList scroll.

<View style={{flex:1}}>
  <FlatList
    data={this.state.data}
    renderItem={({item}) => this.renderData(item)}
    keyExtractor={item => item._id}
    contentContainerStyle={{
    flexGrow: 1,
    }}
  />
</View>

I also meet this issue when I'm adding image tool in my chatting app, and found a trick solution.

By simply add TouchableWithoutFeedback to cover every element in flatlist. Strange but it works.

_renderCardItem = ({ item }) => (
<TouchableWithoutFeedback onPress={()=>{}}>
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
</TouchableWithoutFeedback>
);

Take out the flex: 1 in your styles.cardcontainer, that should let you scroll. The FlatList/ScrollView contentContainerStyle prop wraps all the child components—what's "inside" the FlatList if you will—and should never have a defined height or flex value. If you need to set a flex: 1 for the FlatList itself use style={{flex: 1}} instead. Cheers!


For others coming to this question: My FlatList was inside a TouchableWithoutFeedback. I changed that to a View and was able to scroll again.