title: React Native Touchable in one row
body: <p>I'm facing a problem and I'm not able to find a solution for this. I want two touchable buttons in one row for some actions. The problem is, when I click one one of them the onPress event of the other button get's hit too. What is wrong here? This is my code:</p>
  <p>My Component:</p>
  <pre><code>      &lt;View style={styles.actionContainer}&gt;
          &lt;TouchableOpacity onPress={handleState} style={styles.action}&gt;
            {favorite ? (
              &lt;AntDesign name=&quot;heart&quot; size={30} color={colors.secondary} /&gt;
            ) : (
              &lt;AntDesign name=&quot;hearto&quot; size={30} color={colors.tab} /&gt;
            )}
            &lt;TextCmpt style={styles.iconTagline}&gt;In deinen Korb&lt;/TextCmpt&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity style={styles.action}&gt;
            {favorite ? (
              &lt;AntDesign name=&quot;checkcircle&quot; size={30} color={colors.tab} /&gt;
            ) : (
              &lt;AntDesign
                name=&quot;checkcircleo&quot;
                size={30}
                color={colors.secondary}
              /&gt;
            )}
            &lt;TextCmpt style={styles.iconTagline}&gt;Direkt sichern&lt;/TextCmpt&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
  </code></pre>
  <p>My styleSheet:</p>
  <pre><code> actionContainer: {
      flexDirection: &quot;row&quot;,
      justifyContent: &quot;center&quot;,
      margin: 20,
    },
    action: {
      // position: &quot;absolute&quot;,
      alignItems: &quot;center&quot;,
      borderRadius: 10,
      backgroundColor: colors.primary,
      justifyContent: &quot;center&quot;,
      height: 80,
      width: &quot;100%&quot;,
    },
  </code></pre>