React Native - TouchableOpacity не работает в контейнере с позицией: абсолютной ⇐ CSS

[Anonymous]

У меня есть анимированный SafeAreaView с двумя кнопками внутри, представление имеет положение: абсолютное.
Когда я нажимаю кнопку кнопка, она проходит через нее и попадает на элементы позади кнопки.
В настоящее время я использую zIndex и повышение прав и попробовал множество решений, найденных здесь, в Stack Overflow, таких как:

• Использование TouchableHighlight
• Используйте onPressIn вместо onPress
• Импортируйте TouchableOpacity из обработчика React-native-gesture вместо React-native

Если я использую position: относительная в родительском контейнере, кнопка работает.
Вот мой код, Компонент Button имеет стиль TouchableOpacity, я также пробовал удалять обертки, меняя основной контейнер на TouchableOpacity вместо SafeAreaView, но ничего...

Код: Выделить всё

return (


 {
console.log('teste');
}}
accessible
accessibilityLabel="Continuar com Facebook">


Editar


 {
console.log('teste');
}}
accessible
accessibilityLabel="Continuar com Facebook">


Encerrar




);
});

const Wrapper = Animated.createAnimatedComponent(styled.SafeAreaView`
width: 100%;
border-top-width: 1px;
border-top-color: ${({ theme: { border } }) => border};
background: ${({ theme: { background } }) => background};
z-index: 1;
position: absolute;
flex-direction: row;
justify-content: space-between;
align-items: center;
bottom: 0;
left: 0;
${({ isAndroid }) => isAndroid && 'elevation: 1'}
height: 150px;
`);

const ButtonsWrapper = styled.View`
flex: 1;
align-items: center;
justify-content: center;
padding: 10px;
`;

const ActionButton = styled(Button)``;

const BtnText = styled(Text)`
padding-right: 20px;
flex: 1;
text-align: center;

${({ noPadding }) =>
noPadding &&
`
padding: 0px;
`}
`;

Подробнее здесь: https://stackoverflow.com/questions/622 ... n-absolute