Слишком маленькая область прокрутки с помощью SectionList React Native

В настоящее время я пытаюсь использовать <SectionList> внутри классического <View>, все мои данные отформатированы, список отображается правильно и действия моего элемента работают.

Проблема в том, что когда я нахожусь в верхней части списка разделов, область, доступная для запуска прокрутки, на самом деле очень мала (примерно 100 пикселей от верхней части списка). Однако, как только я прокручиваю немного вниз из этой области, весь список становится прокручиваемым и работает так, как задумано, пока я не вернусь к началу.

В моем родительском представлении есть flex: 1, а также мой список разделов

Среда
Рабочая среда: MacOS Sierra 10.13.3
Экспо-версия: 23.0
Версия React Native: 0.50
Реакция: 16.0
Использование моделирования iPhone 8
На Android нет проблем

Действия по воспроизведению
Классическое создание списка разделов внутри представления

Ожидаемое поведение
Прокрутка должна запускаться из любого места в SectionList.

Фактическое поведение
Когда SectionList находится наверху, прокрутка срабатывает только внутри небольшой области (около 100 пикселей от верха списка).

Код моего списка разделов:

<View style = {{ flex: 1 }}>
      <SectionList
        style = {styles.openSectionList} // flex: 1
        scrollEnabled
        stickySectionHeadersEnabled
        sections = {this.sections}
        keyExtractor = {item => item["@id"]}
        removeClippedSubviews
        renderSectionHeader = {({ section }) => (
          <TouchableHighlight
            onPress = {() => this.onSectionHeaderPressRef(section.index)}
            activeOpacity = {0.65}
            underlayColor = "rgba(0, 0, 0, 0.2)"
            style = {styles.sectionHeader}
          >
            <View style = {styles.categoryContentContainer}>
              <View style = {styles.firstPartContent}>
                <Text style = {styles.categoryHeaderText}>
                  {section.title === "Autres"
                    ? "Mes produits"
                    : section.title}{" "}
                </Text>
                {section.nbItems - section.nbItemsSelected === 0 ? (
                  <CheckBox
                    label = ""
                    checked
                    checkboxStyle = {styles.checkbox}
                    checkboxContainer = {styles.checkboxContainer}
                  />
                ) : (
                  <Text
                    style = {[
                      styles.categoryHeaderText,
                      { color: Colors.contrastColor },
                    ]}
                  >
                    ({section.nbItems - section.nbItemsSelected})
                  </Text>
                )}
              </View>
              <Image
                source = {require("../../../assets/common/chevron.png")}
                style = {
                  section.index === this.state.currentCategoryOpen
                    ? styles.categoryChevronOpen
                    : styles.categoryChevronClosed
                }
              />
            </View>
          </TouchableHighlight>
        )}
        renderItem = {({ item }) =>
          this.state.currentCategoryOpen === item.categoryIndex ? (
            <ShoppingListProduct
              key = {item["@id"]}
              ingredient = {item}
              updateIngredient = {this.updateIngredientListRef}
              onLongPress = {this.itemLongPressedRef}
            />
          ) : null}
      />
  </View>

GIF с фактическим поведением (я пытаюсь прокручивать каждый раз, когда курсор перемещается), где мы видим, что прокрутка срабатывает только тогда, когда я нахожусь выше определенной высоты.

Гифка

Любая помощь будет принята с благодарностью, поскольку я не знаю, является ли это ошибкой и / или я неправильно реализую компонент.

Заранее благодарю.