React Native View не получает сенсорный ввод внутри родительского контейнера с абсолютным позиционированием?

Question

Я хорошо знаком с zIndex и с тем, как система позиционирования работает с обычным HTML в Интернете. Моя проблема может быть связана с c библиотекой компонентов, которую я использую (https://github.com/mrlaessig/react-native-autocomplete-input), но я не могу заставить свои раскрывающиеся элементы реагировать на прикосновения.

У меня есть родитель контейнер <View>, который позиционируется абсолютно. Внутри этого представления у меня есть компонент <Autocomplete> (мой раскрывающийся список), который открывается при нажатии. Я не могу выбрать элементы раскрывающегося списка, если они не находятся в пределах высоты родительского представления.

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

РЕДАКТИРОВАТЬ: Я заключил автозаполнение в другое представление с абсолютным позиционированием согласно разделу # android документации, но такая же проблема с index. Я тестирую android, но мне нужно, чтобы он работал кроссплатформенным.

Родительский компонент:

const dropDownProps = {
  data: ['Cat', 'Dog', 'Chicken'],
  currentValue: 'Cat',
  onChange: e => {
    console.log(e, 'callback');
  },
  viewStyles: {
    flex: 1,
    marginHorizontal: 5,
  },
};

<View style={styles.container}>
  <View style={styles.bottomBar}>
    <DropDownSelect {...dropDownProps} />
  </View>
</View>

const styles = {
  container: {
    position: 'absolute',
    top: 10,
    left: 10,
    right: 10,
    borderRadius: 2,
    backgroundColor: black,
    paddingRight: 5,
    zIndex: X <-- this does nothing
  },
  bottomBar: {
    width: '100%',
    paddingBottom: 5,
    flexDirection: 'row',
    borderRadius: 20,
    alignItems: 'center',
    zIndex: X <-- this also does nothing
  },
}

Мой дочерний раскрывающийся компонент:

import React, {useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import Autocomplete from 'react-native-autocomplete-input';
import Icon from 'react-native-vector-icons/MaterialIcons';

const DropDownSelect = ({
  data,
  currentValue,
  onChange,
  viewStyles,
  containerStyles,
}) => {
  const [hideResults, setHideResults] = useState(true);
  const [value, setValue] = useState(currentValue);
  const onSelect = val => {
    setHideResults(true);
    setValue(val);
    onChange(val);
  };

  return (
    <View style={{minHeight: 35, ...viewStyles}}>
      <View style={{...styles.autocompleteContainer, ...containerStyles}}>
        <Autocomplete
          data={data}
          listStyle={styles.listStyles}
          inputContainerStyle={styles.inputContainer}
          keyExtractor={item => item}
          returnKeyType={'next'}
          hideResults={hideResults}
          renderTextInput={() => (
            <TouchableOpacity
              activeOpacity={0.5}
              style={styles.textInputItem}
              onPress={() => setHideResults(!hideResults)}>
              <Text style={styles.textInputItemText}>{value}</Text>
              <View style={styles.dropdownIcon}>
                <Icon
                  size={24}
                  color={'white'}
                  name="arrow-drop-down"
                />
              </View>
            </TouchableOpacity>
          )}
          renderItem={({item}) => (
            <TouchableOpacity onPress={() => onSelect(item)}>
              <Text style={styles.listTextStyle}>{item}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    </View>
  );
};

const styles = {
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    borderRadius: 2,
    right: 0,
    top: 0,
  },
  inputContainer: {
    backgroundColor: 'red',
    borderWidth: 0,
  },
  listStyles: {
    backgroundColor: 'blue',
    borderWidth: 0,
    margin: 0,
  },
  listTextStyle: {
    color: 'white',
    width: '100%',
    paddingVertical: 8,
    paddingLeft: 20,
  },
  textInputItem: {
    height: 35,
    alignItems: 'center',
    paddingLeft: 20,
    flexDirection: 'row',
  },
  textInputItemText: {
    color: 'white',
  },
  dropdownIcon: {
    marginLeft: 'auto',
    borderBottomRightRadius: 2,
    borderTopRightRadius: 2,
    height: '100%',
    width: 35,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
};
export default DropDownSelect;