Prevent parent from being clickable while allowing child to capture touches

Question

In react-native sometimes it is useful to prevent a parent from capturing and handling touch / click events while allowing its children to receive and react to the events. Specifically, this is useful when using a <View/> or <ImageBackground/> container that acts as a transparent background to its child elements (example: gradient based shadows or wrapper views used to center elements of absolute positioning).

Answer 1

React Native offers a pointerEvents prop for <View/> elements which can be set to 'none' in order to stop reacting to touches and clicks, however the trick to allowing the children to still be touchable is to set the pointerEvents prop to 'box-none' instead of 'none'.

Warning: In contrast to regular CSS, pointerEvents is ` prop and not a style. So to use it, you can do

<View style={styles.parentWithoutTouchEvents} pointerEvents='box-none'>
   <View style={styles.touchableChild}>
   </View>
</View>