FlatList not scrolling
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!
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>);
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>