title: How to create custom React Native components with child nodes
body: <p>I want to create a React Native component in pure JavaScript, composed of other components such as <code>TouchableOpacity</code> and <code>Text</code>. I have a couple of buttons in my app that are composed of that two components so I thought it would be nice to learn how to create my own components for better code reuse.</p>
  
  <p>The finished component should look more or less like this:</p>
  
  <pre><code>&lt;Button&gt;
    Tap me!
  &lt;/Button&gt;
  </code></pre>
  
  <p>And this is the code I made for the component so far:</p>
  
  <pre><code>class Button extends Component {
    render () {
      &lt;TouchableOpacity style={styles.button}&gt;
        &lt;Text style={styles.textButton}&gt;
        &lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    }
  };
  </code></pre>
  
  <p>However, I don't know how I can use the <code>Tap me!</code> inner child text in my component and I don't really get how I can make my component to accept custom props and the <code>TouchableOpacity</code> and <code>Text</code> props.</p>
  
  <p><strong>PS:</strong> I know there are some React Native components like this out there, but I prefer to create my own in order to learn how I can build this kind of custom components. Also, React Native is awesome but I cannot find how to build things like this in their docs and I think it's a really interesting exercise for people starting in React.</p>