Nested Touchables in React Native

Question

I experience a problem, where double-touches (to simultaneous touches) within nested Touchables arrive at the parent Touchable instead.

In the example below, Touchables are nested three layers deep. When I press the deepest touchable (coloured blue), the console correctly prints "blue". It also behaves correctly when I press the other layers printing "green" and "red" respectively.

The weird behaviour arises when I do something with two simultaneous touches and release - then the touched layer's onPress does not get called at all. Instead the parent Touchable receives just a single touch when both touches are over.

Furthermore when i perform two simultaneous touches on the outermost layer (red with no parent touchable)- that layer will receive the touch. That seems more correct from my perspective, but deviates from the weird behaviour within the nested Tocuables described above.

<View style={{flex:1, backgroundColor:"#666666"}}>

    <TouchableHighlight onPress={()=>{console.log("red")}}>
      <View style={{backgroundColor:"#FF0000", height:300}}>   
        <TouchableHighlight onPress={()=>{console.log("green")}}>
          <View style={{backgroundColor:"#00FF00", height:200}}>
            <TouchableHighlight onPress={()=>{console.log("blue")}}>
              <View style={{backgroundColor:"#0000FF", height:100}} />
            </TouchableHighlight>
          </View>
        </TouchableHighlight>
      </View>
    </TouchableHighlight>
</View>

Answer 1

I copied your code and I'm a bit clueless whether it actually looks like something you're trying to achieve: https://snack.expo.io/@zvona/onpressin

Snack doesn't allow using multiple touches, but I make a long shot: use onPressIn instead of onPress.