title: Handling touch outside of the parent component
body: <p><a href="https://i.stack.imgur.com/cH3mT.png" rel="nofollow noreferrer">Area marked with blue border doesn't handle touches</a></p>
  
  <p>I've created a custom TabBar and Component with TouchableOpacity (highlighted with golden). The problem is it only handles touches inside the bottom view. zIndex: 1 didn't solve the problem. Is there any way to fix this?</p>
  
  <p>Here is the src of my middle button:</p>
  
  <pre><code>const DiaryTab = props =&gt; {
    const {isActive, onPress, onLongPress} = props;
  
    return (
      &lt;TouchableOpacity
        onPress={onPress}
        onLongPress={onLongPress}
        style={[S.container, {backgroundColor: 'gold'}]}&gt;
        &lt;View style={S.outerCircle}&gt;
          &lt;View
            style={[
              S.innerCircle,
              {
                backgroundColor: isActive ? R.colors.orange : R.colors.mainGreen
              }
            ]}&gt;
            &lt;Icon name="header-check" size={40} color={R.colors.white} /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/TouchableOpacity&gt;
    );
  };
  
  const S = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      height: 100,
      top: -42
      // zIndex: 999
    },
    outerCircle: {
      width: 82,
      height: 82,
      backgroundColor: R.colors.white,
      // top: -42,
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 41
    },
    innerCircle: {
      width: 60,
      height: 60,
      borderRadius: 30,
      justifyContent: 'center',
      alignItems: 'center',
      elevation: 3
    }
  });
  </code></pre>
  
  <p>Thank you!</p>