FlatList not scrolling FlatList not scrolling reactjs reactjs

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>