title: Style breaks when using TouchableOpacity instead of TouchableWithoutFeedback
body: <p><a href="https://i.stack.imgur.com/XJ5vw.jpg" rel="noreferrer">Here's how this part looks using TouchableWithoutFeedback</a></p>
  
  <p><a href="https://i.stack.imgur.com/QKKHa.jpg" rel="noreferrer">And here is the same thing, except with TouchableOpacity</a></p>
  
  <p>The code for this part:</p>
  
  <pre><code>&lt;TouchableWithoutFeedback&gt;
      &lt;View style={styles.buyCoinsItem}&gt;
          &lt;View style={styles.cost}&gt;
              &lt;Text&gt;{no_of_coins}&lt;/Text&gt;
          &lt;/View&gt;
          &lt;Text&gt;{product.priceString}&lt;/Text&gt;
          &lt;View style={{height:30, flexDirection: 'row', marginTop:10}}&gt;
              {displayDiscount &amp;&amp; 
              &lt;View style={styles.discountContainer}&gt;
                  &lt;Text style={styles.whiteText}&gt;Save {discount}&lt;/Text&gt;
              &lt;/View&gt;
              }
          &lt;/View&gt;
      &lt;/View&gt;
  &lt;/TouchableWithoutFeedback&gt;
  </code></pre>
  
  <p>What's going on here?</p>