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.