React Native Position Absolute Button doesn't work - reactjs

Question

clicking this position absolute button is not working when I touch it.
code
render() {
return (
<Container>
<View style={{ borderColor: '#fff',height:'30%'}}>
<ImageBackground
source={{uri: 'https://i.ibb.co/TwdZhVM/image-5.png'}}
style={styles.singleCategoryViewBackgroundImage} >
</ImageBackground>
<View style={styles.overlay}>
<Thumbnail large
style={styles.profileImage}
source={{uri:"https://firebasestorage.googleapis.com/v0/b/weddi-4c344.appspot.com/o/Laser%20%26%20Beauty%20Centers%2FDivine%20beauty%20clinics%2FLogo.jpg?alt=media"}} />
<View style={styles.titleContent}>
<Text style={styles.titleText}> Divine Beauty Center</Text>
<Text note>Cairo - Naser City</Text>
<View style={{flexDirection: 'row'}}>
<Button rounded style={styles.actionButton}
onPress={() =>
ActionSheet.show(
{
options: BUTTONS,
cancelButtonIndex: CANCEL_INDEX,
destructiveButtonIndex: DESTRUCTIVE_INDEX,
title: "Testing ActionSheet"
},
buttonIndex => {
this.setState({ clicked: BUTTONS[buttonIndex] });
}
)}
>
<Icon ios="ios-pin" android="md-pin" color="#1a1917"/>
</Button>
<Button rounded style={styles.actionButton}>
<Icon ios="ios-call" android="md-call" color="#1a1917"/>
</Button>
</View>
</View>
</View>
</View>
<Content style={{paddingHorizontal: '6%', marginTop: '20%', height: '20%'}}>
</Content>
</Container>
styles
overlay: {
alignItems: 'center',
height: '65%',
backgroundColor: colors.offWhite,
position: 'absolute',
top: '68%',
left: 0,
right: 0,
bottom: 0,
zIndex: 1,
marginHorizontal: '6%',
borderRadius: 10/2,
opacity: 0.95,
},
singleCategoryViewBackgroundImage: {
width: '100%',
height: '100%',
justifyContent:'center',
alignContent:'center',
},
profileImage: {
position: 'absolute',
top: '-38%',
left: '36%',
right: 0,
bottom: 0,
zIndex: 2,
alignSelf: 'center',
overflow: 'hidden',
borderWidth: 2,
borderColor: '#b42334',
width: 100,
height: 100,
borderRadius: Platform.OS === 'ios' ? 0 : 150/2,
},
titleContent: {
zIndex: 40,
marginVertical: '15%',
alignItems: 'center',
},
titleText: {
fontFamily: 'Roboto',
fontWeight: 'bold',
},
actionButton: {
width:50,
zIndex: 50,
margin: '2%',
backgroundColor: colors.red,
}
I tried replacing the native-base button with react native button still doesn't work but when I make the button outside this position absolute mess it works great but I like how it looks inside this view so any ideas how can I get it to work that way?

Answer 1

From https://www.w3schools.com/cssref/pr_pos_z-index.asp: "Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky)." Since actionButton doesn't specify a position attribute, it's position is the default position value (static) and z-index does not apply. So your absolutely positioned Views are on top of your button.