0

I'm trying to add a hit slop to some icons and I want them to persist even if the icon is hidden under another component.

This is already working fine on iOS with the zIndex prop, but neither the zIndex or elevation prop seem to be having any effect on Android. The icon is still clickable, just without the hit slop surrounding it. This is likely not an issue with the hit slop, as it works fine on a screen alone when not inside of a component.

export const RemoveIndicator = ({ icon, onPress }) => (
  <View
    style={ {
      elevation: 2,
      zIndex: 99,
    } }
  >
    <TouchableIcon
      color={ colors.Red500 }
      name={ icon || 'Circle_Remove_Solid' }
      onPress={ onPress }
      size={ 16 }
    />
  </View>
);

The TouchableIcon component is a component that contains a glyph (given the color, name, and size), wrapped in a TouchableOpacity that takes an onPress function. The hit slop is calculated inside the TouchableIcon based on the size prop.

I expect the icon to be clickable in an area around it, but it is only clickable on the visible glyph itself.

user2872777
  • 99
  • 2
  • 11
  • I think you can solve this using pointerEvents of View tag.https://facebook.github.io/react-native/docs/view.html#pointerevents – Thakur Karthik Sep 17 '19 at 20:25
  • I don't think this works for what I need. I tried setting the TouchableIcon on auto and the view above it to box-none but it didn't change anything. – user2872777 Sep 18 '19 at 14:26

0 Answers0