FlatList not scrolling : <p>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?</p>

<p><strong>render-function and style from my screen file:</strong></p>

<pre><code>render() {
return (
  &lt;View style={styles.container}&gt;
    &lt;SearchBar /&gt;
    &lt;ActivityList style={styles.list} data={this.state.data} /&gt;
  &lt;/View&gt;
);
}
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'flex-start',
 },
 list: {
  flex: 1,
  overflow: 'hidden',
 },
});
</code></pre>

<p><strong>render function and style from my listitem component:</strong></p>

<pre><code>export default class CardItem extends React.PureComponent {
render() {
return (
  &lt;View style={styles.cardview}&gt;
    &lt;View style={styles.imagecontainer}&gt;
      &lt;Image
        resizeMode="cover"
        style={styles.cardimage}
        source={{
          uri: this.props.image,
        }}
      /&gt;
    &lt;/View&gt;
    &lt;View style={styles.cardinfo}&gt;
      &lt;Text style={styles.cardtitle}&gt;{this.props.title}&lt;/Text&gt;
      &lt;View style={styles.cardtext}&gt;
        &lt;Text style={styles.textdate}&gt;{this.props.date}&lt;/Text&gt;
        &lt;Text style={styles.texthour}&gt;{this.props.hour}&lt;/Text&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  &lt;/View&gt;
);
}
}

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',
},
});
</code></pre>

<p><strong>render function and style from my list component:</strong></p>

<pre><code>export default class ActivityList extends React.Component {
_renderCardItem = ({ item }) =&gt; (
&lt;CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/&gt;
);

_keyExtractor = item =&gt; item.id;

render() {
return (
  &lt;FlatList
    data={this.props.data}
    renderItem={this._renderCardItem}
    contentContainerStyle={styles.cardcontainer}
    keyExtractor={this._keyExtractor}
  /&gt;
);
}
}

const styles = StyleSheet.create({
 cardcontainer: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: 'white',
  alignItems: 'center',
  width: Dimensions.get('window').width,
  borderWidth: 0,
 },
});
</code></pre>

<p>my data items have all a unique id, title, date, hour.</p>

<p>Read through all available guides and docs and found no solution.</p>
