FlatList not scrolling

Question

i have created a screen where I display a component that contains a FlatList. For some reason I can't scroll through the list. Someone who can spot my mistake and point me in the right direction?

render-function and style from my screen file:

render() { return (   <View style={styles.container}>     <SearchBar />     <ActivityList style={styles.list} data={this.state.data} />   </View> ); } }  const styles = StyleSheet.create({  container: {   flex: 1,   overflow: 'hidden',   backgroundColor: '#fff',   alignItems: 'center',   justifyContent: 'flex-start',  },  list: {   flex: 1,   overflow: 'hidden',  }, }); 

render function and style from my listitem component:

export default class CardItem extends React.PureComponent { render() { return (   <View style={styles.cardview}>     <View style={styles.imagecontainer}>       <Image         resizeMode="cover"         style={styles.cardimage}         source={{           uri: this.props.image,         }}       />     </View>     <View style={styles.cardinfo}>       <Text style={styles.cardtitle}>{this.props.title}</Text>       <View style={styles.cardtext}>         <Text style={styles.textdate}>{this.props.date}</Text>         <Text style={styles.texthour}>{this.props.hour}</Text>       </View>     </View>   </View> ); } }  const styles = StyleSheet.create({  cardview: {   flex: 1,   justifyContent: 'flex-start',   backgroundColor: 'white',   elevation: 3,   maxHeight: 200,   width: Dimensions.get('window').width - 20,   margin: 1,   marginTop: 10,   borderRadius: 4, }, imagecontainer: {  flex: 7,  height: 140,  borderRadius: 4, }, cardimage: {  flex: 1,  opacity: 0.8,  height: 140,  borderTopLeftRadius: 4,  borderTopRightRadius: 4, }, cardinfo: {  flex: 2,  flexDirection: 'row',  justifyContent: 'space-between',  alignItems: 'center',  padding: 10, }, cardtitle: {  flex: 1,  fontSize: 16,  fontWeight: 'bold', }, cardtext: {  flex: 1,  justifyContent: 'center',  alignItems: 'flex-end', }, textdate: {  color: '#5e5e71', }, texthour: {  color: '#5e5e71', }, }); 

render function and style from my list component:

export default class ActivityList extends React.Component { _renderCardItem = ({ item }) => ( <CardItem   image={item.image}   title={item.title}   date={item.date}   hour={item.hour} /> );  _keyExtractor = item => item.id;  render() { return (   <FlatList     data={this.props.data}     renderItem={this._renderCardItem}     contentContainerStyle={styles.cardcontainer}     keyExtractor={this._keyExtractor}   /> ); } }  const styles = StyleSheet.create({  cardcontainer: {   flex: 1,   overflow: 'hidden',   backgroundColor: 'white',   alignItems: 'center',   width: Dimensions.get('window').width,   borderWidth: 0,  }, }); 

my data items have all a unique id, title, date, hour.

Read through all available guides and docs and found no solution.

Answer 1

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!