Прокрутка FlatList прерывается при абсолютном позиционировании

React Native: 0.63.3

Сначала позвольте мне начать с того, что я потратил ~ 6 часов, пытаясь решить эту проблему, и мне еще предстоит найти в Интернете решение, которое бы подходило для моей установки.

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

Каждый из красных квадратов - это вид. Раскрывающийся список ввода для поиска настроен на наложение на представления красного поля, что он и делает.

Проблема, однако, в том, что FlatList будет прокручиваться только в том случае, если моя мышь находится в этом пространстве между вводом поиска и первым представлением. Как только моя мышь находится поверх View, FlatList, кажется, игнорирует прокрутку.

Вот самая простая версия этого кода:

import React, { useState } from 'react';
import { FlatList, View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

export const myStyles = StyleSheet.create({
    container: {
        minWidth: '100%',
        borderRadius: 3,
        padding: 10,
        backgroundColor: 'white'
    },
    search: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        flex: 1,
        height: 50,
        marginBottom: 50
    },
    textInput: {
        width: '100%',
        borderWidth: 1,
        borderColor: 'blue'
    },
    flatlistContainer: {
        position: 'absolute',
        zIndex: 99999,
        height: 180,
        width: 300
    },
    inputRow: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 0,
        paddingRight: 0,
        paddingTop: 5,
        paddingBottom: 5
    },
    itemRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: 'silver'
    },
    buttonText: {
        alignSelf: 'flex-start',
        fontSize: 13,
        margin: 0,
        padding: 5
    }
});

const MyComponent = () => {
    const [inputValue, setInputValue] = useState('');

    const options = [
        {label: 'one', value: 'one'},
        {label: 'two', value: 'two'},
        {label: 'three', value: 'three'},
        {label: 'four', value: 'four'},
        {label: 'five', value: 'five'},
        {label: 'six', value: 'six'},
        {label: 'seven', value: 'seven'},
        {label: 'eight', value: 'eight'},
        {label: 'nine', value: 'nine'},
        {label: 'ten', value: 'ten'},
        {label: 'eleven', value: 'two'}
    ];

    return (
        <View style={myStyles.container}>
            <View style={[myStyles.inputRow, { zIndex: 9999999 }]}>
                <View style={[myStyles.search]}>
                    <TextInput
                        value={inputValue}
                        onChangeText={(value) => setInputValue(value)}
                        placeholder="Search..."
                        style={myStyles.textInput}
                    />
                    <View>
                        <View style={myStyles.flatlistContainer}>
                            <FlatList
                                data={options}
                                renderItem={({ item }) => (
                                    <TouchableOpacity onPress={() => console.log ('pressed')}>
                                        <View style={myStyles.itemRow}>
                                            <Text style={myStyles.buttonText}>
                                                {item.label}
                                            </Text>
                                        </View>
                                    </TouchableOpacity>
                                )}
                                keyExtractor={item => item.label}
                            />
                        </View>
                    </View>
                </View>
            </View>

            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
        </View>
    );
}


export default MyComponent;