title: React Native - How to make portion of TouchableOpacity not pressable
body: <p>I have a <code>Card</code> component that displays a listing on the app's dashboard page. The whole card is wrapped in a <code>TouchableOpacity</code>. I want the entire card to be Pressable, which links to the listings page.</p>
  <p>However, I want the bottom right corner of it to not be pressable, since it contains a <code>View</code> that has 2 icons on it (a Like button and a Message button). Each of these icons has their own <code>onPress()</code> that needs to happen.</p>
  <p>Right now, if you try to click on the bottom right icons, it just triggers the whole <code>TouchableOpacity</code></p>
  <p>Here is the <code>return</code> statement for <code>Card</code>:</p>
  <pre><code>return (
  &lt;Container&gt;
    &lt;Cover style={{ backgroundColor: &quot;red&quot; }}&gt;
      &lt;Image
        source={{
          width: 80,
          height: 90,
          url: &quot;https://picsum.photos/200/300&quot;,
        }}
      /&gt;
    &lt;/Cover&gt;
    &lt;Content&gt;
      &lt;Title&gt;{props.name}&lt;/Title&gt;
      &lt;PriceCaption&gt;{&quot;$&quot; + props.price}&lt;/PriceCaption&gt;
      &lt;View
        style={{
          position: &quot;absolute&quot;,
          height: 35,
          width: 100,
          top: 45,
          right: 0,
          flexDirection: &quot;row&quot;,
          alignItems: &quot;Flex-end&quot;,
        }}
      &gt;
        &lt;TouchableOpacity
          style={{
            ...styles.ButtonBackground,
            backgroundColor: null,
            left: 70,
          }}
          onPress={() =&gt; {
            launchChat();
          }}
          title={&quot;message&quot;}
        &gt;
          &lt;AntDesign name=&quot;mail&quot; size={26} color={colours.purple} /&gt;
        &lt;/TouchableOpacity&gt;
        &lt;TouchableOpacity
          style={{
            ...styles.ButtonBackground,
            backgroundColor: null,
            marginLeft: 0,
            left: 10,
          }}
          onPress={() =&gt; {
            launchChat();
          }}
          title={&quot;message&quot;}
        &gt;
          &lt;AntDesign name=&quot;heart&quot; size={26} color={colours.purple} /&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    &lt;/Content&gt;
  &lt;/Container&gt;);
  </code></pre>
  <p>Is there a property, or way I can exclude a nested <code>View</code> from a <code>TouchableOpacity</code>?</p>
  <p><strong>Note:</strong> If you click on the <code>Icons</code>, they still trigger their respective <code>onPress()</code>, however, the entire Card still fades out, and the animation is the same as if you clicked elsewhere on the card (so user gets poor feedback on where they clicked).</p>