React Native Calendars отключается на различных устройствах iOS

Question

Я внедряю реагирующие нативные календари в мое приложение. Я использую flexbox для работы с различными размерами устройств. Когда я запускаю свой код в симуляторе iPhone 11, все выглядит отлично, но когда я тестирую на небольших устройствах, таких как iPhone SE или iPhone 6s, календарь отключается. Чего-то не хватает, чтобы календарь правильно масштабировался между устройствами? Вот изображение, чтобы показать, что я имею в виду.

Вот код для моего компонента:

import React, {Component} from 'react';
import {View, Image} from 'react-native';
import {Calendar} from 'react-native-calendars';
import AddIcon from '../../img/add_icon.png';
import {connect} from 'react-redux';

class ReportScreen extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.reportContainer}>
          <View style={styles.headerContainer} />
          <Calendar
            // Collection of dates that have to be marked. Default = {}
            onDayPress={day => {
              console.log('selected day', day);
            }}
            hideArrows={true}
            hideExtraDays={true}
            markedDates={{
              '2020-01-26': {
                selected: true,
                // marked: true,
                selectedColor: '#6448EE',
              },
              '2020-01-17': {marked: true, selectedColor: 'blue'},
              '2020-01-15': {marked: true, selectedColor: 'blue'},
              '2020-01-16': {marked: true, selectedColor: 'blue'},
              '2020-01-14': {marked: true, selectedColor: 'blue'},
              '2020-01-13': {marked: true, selectedColor: 'blue'},
            }}
            style={{
              flex: 5,
              paddingTop: `4%`,
            }}
            theme={{
              backgroundColor: 'blue',
              calendarBackground: '#2D2D2D',
              dayTextColor: '#FFFFFF',
              monthTextColor: '#FFFFFF',
            }}
          />

          <View style={styles.buttonContainer}>
            <View style={{flex: 1, backgroundColor: '#2D2D2D'}} />
            <View style={{flex: 1, backgroundColor: '#C8C8C7'}}>
              <Image source={AddIcon} style={styles.buttonIcon} />
            </View>
          </View>
          <View style={styles.infoContainer} />
        </View>
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
  },
  reportContainer: {
    backgroundColor: '#ecf5fd',
    flex: 1,
  },
  headerContainer: {
    flex: 1,
    backgroundColor: '#2D2D2D',
  },
  calendarContainer: {
    flex: 6,
    backgroundColor: '#32B76C',
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'column',
  },
  buttonIcon: {
    position: 'absolute',
    top: '-100%',
    right: `5%`,
    width: `18%`,
    height: `200%`,
    resizeMode: 'stretch',
  },
  infoContainer: {
    flex: 5.7,
    backgroundColor: '#C8C8C7',
    flexDirection: 'column',
  },
};

const mapStateToProps = state => {
  return {};
};

export default connect(mapStateToProps, {})(ReportScreen);

Спасибо