Consider this layout.
The code:
return (
<AppContainer
backgroundColor={
COLORS.white
}>
<SafeAreaView style={{flex: 1}}>
<AppHeader
title='QRIS'
hideBack={true}
indicatorRight={true}
color={COLORS.primary}
rightComponent={
<TouchableOpacity onPress={() => setOpenOptions(!openOptions)}>
<IconQuestionBlue />
</TouchableOpacity>
}
/>
<Image
source={require('../../assets/images/static_qr_bg.png')}
resizeMode={`${isTablet ? 'contain' : 'contain'}`}
style={{
width: width,
height: height,
position: 'absolute',
marginTop: isTablet ? 10 : 10,
}}
/>
{openOptions && (
<StaticQRInfoModal
isVisible={openOptions}
onClose={() => {
setOpenOptions(false);
}}
onNext={() => setOpenOptions(false)}
/>
)}
</SafeAreaView>
</AppContainer>
);
My expectation is if the blue question mark icon is clicked, then a modal dialog will be shown. Sadly it's not. But if this part is commented:
<Image
source={require('../../assets/images/static_qr_bg.png')}
resizeMode={`${isTablet ? 'contain' : 'contain'}`}
style={{
width: width,
height: height,
position: 'absolute',
marginTop: isTablet ? 10 : 10,
}}
/>
Then yes the modal dialog appears after the icon is clicked.
Sure the image is not is visible. I don't get how showing an image could make an onPress
on a certain TouchableOpacity doesn't work. How to show the image while making the icon is clickable?
The issue might be with <Image />
that has position: 'absolute'
that is making it overlap everything below it even if it's transparent. So when you're pressing mark icon, your press is getting absorved by Image
component instead of TouchableOpacity
. Try using z-index
(for iOS) and elevation
(for Android). Your implementation should look like this:
<Image
source={require('../../assets/images/static_qr_bg.png')}
resizeMode="contain"
style={{
width: width,
height: height,
position: 'absolute',
marginTop: isTablet ? 10 : 10,
zIndex: -1, // Push it to the back
elevation: -1, // For Android
}}
/>
The simple idea is to move <Image />
deeper.
If this didn't help. Try using Pressable
instead of TouchableOpacity
, it might solve the issue as it is better at handling such scenarios. It is more stable, and react-native
recommend in their document to use it as it is more future-proof.