react-nativetouchableopacity

TouchableOpacity cannot be clicked if Image is shown


Consider this layout.

enter image description here

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.

enter image description here

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?


Solution

  • 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.