"FlatList не прокручивается"

Описание проблемы:

Я создал экран, на котором отображается компонент, содержащий FlatList. По какой-то причине я не могу прокручивать список. Можете ли вы помочь мне обнаружить ошибку и указать направление для решения?

render-функция и стили из моего экранного файла:

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-функция и стили из моего компонента списка элементов:

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-функция и стили из моего компонента списка:

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,
  },
});

Мои данные имеют уникальные идентификаторы, заголовки, даты и часы.

Я просмотрел все доступные руководства и документацию, но не нашел решения.