title: onPress event not working on TouchableOpacity on Android
body: <p>Before I begin, I have checked out other common solutions to this problem, like importing TouchableOpacity from 'react-native' instead of 'react-gesture-handler' (I don't even have it installed), or changing z-index/absolute positioning. None of them work.</p>
  <p>I'm a beginner in react native. I'm trying to follow along with a react native course, but I'm stuck on this issue. I'm using Expo on a real Android. I don't use emulators. Haven't tested on iOS as I don't have access to one. When I add onPress to TouchableOpacity, most of the time it gives feedback when clicked (opacity changes), but it won't fire the onPress event. Sometimes, however, it works. When I press on the right edge, sometimes the event fires. Here's an example:</p>
  <p>index.js</p>
  <pre><code>import React from &quot;react&quot;;
  import Options from &quot;./screens/Options&quot;;
  
  export default function App() {
    return &lt;Options /&gt;;
  }
  </code></pre>
  <p>Options.js</p>
  <pre><code>import React from &quot;react&quot;;
  import { View, StyleSheet } from &quot;react-native&quot;;
  import RowItem from &quot;../components/RowItem&quot;;
  import Constants from &quot;expo-constants&quot;;
  import styled from &quot;styled-components&quot;;
  import colors from &quot;../constants/colors&quot;;
  import { Entypo } from &quot;@expo/vector-icons&quot;;
  
  const SSeparator = styled.View`
    background: ${colors.border};
    height: ${StyleSheet.hairlineWidth}px;
    margin-left: 20px;
  `;
  const SView = styled.View`
    margin-top: ${Constants.statusBarHeight}px;
  `;
  
  export default () =&gt; {
    return (
      &lt;SView&gt;
        &lt;RowItem
          title=&quot;Themes&quot;
          icon={
            &lt;Entypo
              name=&quot;chevron-left&quot;
              size={20}
              color={colors.blue}
              onPress={() =&gt; alert(&quot;click&quot;)}
            /&gt;
          }
        /&gt;
        &lt;SSeparator /&gt;
      &lt;/SView&gt;
    );
  };
  </code></pre>
  <p>RowItem.js</p>
  <pre><code>import React from &quot;react&quot;;
  import { TouchableOpacity, Text } from &quot;react-native&quot;;
  import styled from &quot;styled-components&quot;;
  import colors from &quot;../constants/colors&quot;;
  
  const SText = styled.Text`
    font-size: 16px;
  `;
  const STouchableOpacity = styled.TouchableOpacity`
    margin: 16px 20px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  `;
  
  export default ({ title, icon, onPress }) =&gt; {
    return (
      &lt;STouchableOpacity onPress={onPress}&gt;
        &lt;SText&gt;{title}&lt;/SText&gt;
        {icon}
      &lt;/STouchableOpacity&gt;
    );
  };
  </code></pre>
  <p>Any ideas?</p>