Почему React Native видит OnPress с неправильной точки зрения?

Question

Я создаю приложение с этим макетом. Я использую компонент автозаполнения из https://github.com/mrlaessig/react-native-autocomplete-input/. За результатами автозаполнения находится scrollView с элементами, которые можно нажимать. В IOS все работает нормально, но в Android, если я пытаюсь выбрать элемент из компонента автозаполнения вместо того, чтобы видеть щелчок в автозаполнении, он вместо этого отображает щелчок, как будто я нажал на представление, которое находится позади него. Так, например, на этом изображении, если я нажимаю на Яблочное пюре, вместо того, чтобы оно запускало событие щелчка яблочного пюре, оно запускает событие щелчка элемента 1.

Воткод для этого вида:

import {
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from "react-native";

import Autocomplete from "react-native-autocomplete-input";

export default function HomeScreen() {
    const [searchString, setSearchString] = useState("");

    const data = [
        { name: "Apple", key: "1" },
        { name: "AppleSauce", key: "2" },
        { name: "Apple Juice", key: "3" },
        { name: "Banana", key: "4" },
        { name: "Pear", key: "5" },
        { name: "Pear2", key: "6" },
        { name: "Pear3", key: "7" }
    ];

    const findFruit = query => {
        if (query === null || query === "") {
            return [];
        }
        const regex = new RegExp(`${query.trim()}`, "i");
        const results = data.filter(fruit => fruit.name.search(regex) == 0);
        return results;
    };

    const acSearchResults = findFruit(searchString);

    return (
        <View style={styles.pageContainer}>
            <View style={styles.pageHeaderSection}>
                <Text style={styles.title}>Title here</Text>
                <View style={styles.filterRow}>
                    <View style={styles.pickerContainer}>
                        <Text>Picker</Text>
                    </View>
                    <View style={styles.acMasterContainer}>
                        <View style={styles.autocompletesContainer}>
                            <Autocomplete
                                data={acSearchResults}
                                defaultValue={searchString}
                                onChangeText={text => setSearchString(text)}
                                renderItem={({ item, i }) => (
                                    <TouchableOpacity
                                        onPress={() =>
                                            alert(
                                                "you clicked item:" + item.name
                                            )
                                        }
                                    >
                                        <Text>{item.name}</Text>
                                    </TouchableOpacity>
                                )}
                            />
                        </View>
                    </View>
                    <View style={styles.thirdContainer}>
                        <Text>More content</Text>
                    </View>
                </View>
            </View>
            <ScrollView style={styles.scrollView}>
                <TouchableOpacity onPress={() => alert("item clicked")}>
                    <View style={styles.scrollItem}>
                        <Text>Item #1</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => alert("item clicked")}>
                    <View style={styles.scrollItem}>
                        <Text>Item #2</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => alert("item clicked")}>
                    <View style={styles.scrollItem}>
                        <Text>Item #3</Text>
                    </View>
                </TouchableOpacity>
            </ScrollView>
        </View>
    );
}

HomeScreen.navigationOptions = {
    header: null
};

const styles = StyleSheet.create({
    pageContainer: {
        flexGrow: 1,
        backgroundColor: "#fff"
    },
    pageHeaderSection: {
        marginTop: 35,
        zIndex: 10,
        backgroundColor: "red",
        justifyContent: "flex-end"
    },
    pickerContainer: {
        flex: 1,
        backgroundColor: "yellow"
    },
    acMasterContainer: {
        flexGrow: 1
    },
    autocompletesContainer: {
        paddingTop: 0,
        flex: 1,
        zIndex: 2,
        width: "100%",
        position: "absolute",
        left: 0,
        right: 0,
        top: 0,
        backgroundColor: "black"
    },
    acResultsList: {
        zIndex: 300,
        elevation: Platform.OS === "android" ? 10 : 0
    },
    acText: {
        zIndex: 20,
        fontSize: 14,
        color: "#2f354b",
        textAlign: "center"
    },
    thirdContainer: {
        flex: 1
    },
    filterRow: {
        backgroundColor: "blue",
        flexDirection: "row",
        height: 42
    },
    inputContainerStyle: {
        flexGrow: 1,
        backgroundColor: "red"
    },
    resultsText: {
        color: "black"
    },
    scrollView: {
        backgroundColor: "gray"
    },
    scrollItem: {
        backgroundColor: "purple",
        flexGrow: 1,
        height: 50
    }
});

Кто-нибудь еще видел эту проблему и нашел решение? Это похоже на проблему zIndex, но я перепробовал все, что мог придумать в отношении zIndex и повышения, и ничего не помогло.