title: How do I nest multiple touchable components?
body: <p>I want to nest multiple touchable components for creating something  similar to facebook post where user can press on avatar image or user name and navigate to user profile,also user can press on rest of the card and navigate to single post screen. When i nest multiple  component and press on child(ie Avatar/User name component) component, the touch gets propagated from child to parent ie parent's onPress event also gets triggered. How do I handle this situation??
  In the example below if I press on AvatarComponent then both the child's and parent's onPress event gets triggered. I only want child's onPress be trigerred when I press on Child.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;TouchableOpacity onPress={() =&gt; console.log('parent component')}&gt;
              &lt;TouchableOpacity onPress={() =&gt; console.log('child component')}&gt;
                &lt;AvatarComponent /&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; console.log('child component')}&gt;
                &lt;UsernameComponent /&gt;
              &lt;/TouchableOpacity&gt;
  &lt;/TouchableOpacity&gt;</code></pre>
  </div>
  </div>
  </p>