title: How to "stack" touch events in React Native
body: <p>I have a feed of items that looks something like this: </p>
  
  <p><img src="https://i.stack.imgur.com/tJkkul.png" width="200" ></p>
  
  <p><strong>What I am trying to Achieve:</strong></p>
  
  <p>When the user presses an item in the feed (represented by the black box), they will be brought to a separate page for that item. When the user clicks on the star icon, they can "favorite" the item. </p>
  
  <p><strong>How I am trying to do it:</strong></p>
  
  <p>I am currently trying to implement this by nesting two <a href="https://facebook.github.io/react-native/docs/touchableopacity.html" rel="nofollow noreferrer">TouchableOpacity</a>'s (represented by the black boxes), where the inner/child TouchableOpacity has a <code>zIndex: 2</code> style applied to it.</p>
  
  <p>The <code>zIndex</code> style does not seem to give a priority to the child container for touch events, so I was wondering if anyone knows how I can implement this pattern.  I think I might need to use the <a href="https://facebook.github.io/react-native/docs/panresponder.html" rel="nofollow noreferrer">PanResponder</a>, but it seems like a very verbose way to add this functionality.</p>
  
  <p>Any comments or examples would be greatly appreciated ! Thanks.</p>