React Native – TouchableOpacity funktioniert nicht bei Containern mit Position: absolut ⇐ CSS

[Guest]

Ich habe eine animierte SafeAreaView mit zwei Schaltflächen darin, die Ansicht hat Position: absolut.
Wenn ich auf klicke button it durchläuft es und trifft auf die Elemente hinter de button.
Ich verwende derzeit zIndex und Elevation und habe viele Lösungen ausprobiert, die hier auf Stack Overflow zu finden sind, wie zum Beispiel:

• Verwendung TouchableHighlight
• OnPressIn anstelle von onPress verwenden
• TouchableOpacity aus React-Native-Gesture-Handler anstelle von React-Native importieren

Wenn ich position: relative im übergeordneten Container verwende, funktioniert die Schaltfläche.
Hier ist mein Code, der Die Button-Komponente ist die gestaltete TouchableOpacity. Ich habe auch versucht, die Wrapper zu entfernen und den Hauptcontainer in TouchableOpacity anstelle von SafeAreaView zu ändern, aber nichts...

Code: Select all

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;
`}
`;