TouchableOpacity does not work because it stays under another element's maskedView

Question

I have a list of cards. Each card has a masked image as a background image and TouchableOpacity over it.

Problem: I can touch/click only the last card. All cards stay under the mask of the next card on the list. So the last cards TouchableOpacity stays on top and works.

The issue is only on IOS. I can interact with all of the cards on Android (both emulator and device).

Card list code:

  <ScrollView style={styles.paddingBottom}>
  {props.jsonArray.map((item) => (
    <View style={styles.cardContainer} key={item.ar_id}>
      <Card 
        item={item} 
        listData={listData} 
        groupsArray={props.groupsArray} 
        setGroupsArray={props.setGroupsArray} 
        navigation={props.navigation}
        parameters={props.parameters}
        filterOptions={props.filterOptions} 
        costBoxWidth={costBoxWidth} 
        thumbnailWidth={thumbnailWidth} 
        mrRght={mrRght} 
        adInfoBase={adInfoBase} 
        adInfoWidth={adInfoWidth} 
        additional={additional} 
        cardWidth={cardWidth} 
      />
    </View>
  ))}
  </ScrollView>

Masked view in card:

import MaskedView from '@react-native-masked-view/masked-view';

...

<MaskedView 
  style={styles.maskedView}
  maskElement={<View style={styles.opening} />}
  androidRenderingMode="software" 
>
  <View style={[ styles.sceneryContainer, {width: props.cardWidth} ]}>
    <Image source={sourceC} style={[ styles.rightImageSingle, { left: rightSingleImageLeft, top: rightSingleImageTop, width: rightSingleImageW } ]} />
    <Image style={styles.leftImage} source={sourceB} />
  </View>
</MaskedView>

<View style={[ styles.adInfoBox, {width: props.adInfoWidth, paddingLeft: props.mrRght} ]}>  ... some text ...  </View>

<TouchableOpacity style={{flex: 1}} onPress={() => {Linking.openURL(props.item["es_link"])}} />

Blue rectangles are the borders of the images. They are bigger then the card. So I used MaskedView.

The zIndex order in the card:

• MaskedView (as a background image) at the very back
• View (that contains text data) in the middle
• TouchableOpacity (to navigate the details page) at the front

Second card's image comes in front of the first card even though it is not visible. So first card's TouchableOpacity stays behind and is not clickable (on iOS).

Answer 1

I found the solution. Just adding pointerEvents="none" to MaskedView props worked like magic. It was written in the docs. Who knew, right.