how do i make views clickable through in react native

Question

I have multiple buttons structured like this:

<View style={ { height: '100%', width: '10%', transform: rotate } }> // being transformed by rotation inside panResponder
   <View {panresponder}/> // takes the touch event
   <Image/> 
</View>

The Problem

If there are two cursors 180 degrees away from eachother, the tail end of the encapsulating View will take the touch that was meant for the touchable view of the other.

The Aim

I want to be able to click the touchable view at any time even if it is being overlapped by a View. how do i make a View clickable through? Is there a way to layer zIndex that it would make the clickable view rise above other views?(ive been fiddling with zIndex and it makes the components disappear).

Answer 1

You can use like this,

<TouchableHighlight style={styles.button} underlayColor={"COLOR"} style = {styles.button} onPress = {() => this.onClickView()}>
   <View />
</TouchableHighlight>

Answer 2

You can use

<TouchableOpacity onPress={}> or <TouchableWithoutFeedback  onPress={}>

to make anything clickable

Answer 3

Wrap the view component inside one of the react native buttons like TouchableHeighlight and provide the event onPress.

TouchableHeightlight onPress = your event View open View close TouchableHeighlight close

Answer 4

Another method:

<View onStartShouldSetResponder={() => {console.log('Clicked')}}></View>