title: React-Native: How to wrap Child components under another class component
body: <p>Let me Explain my question with an example:</p>
  
  <p>in SomeComponent.js I have the following</p>
  
  <pre><code>export default class SomeComponent extends React.Component {
    render() {
      return (
        &lt;View style={{flex:1}}&gt;
  
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>and in Root.js it imports 'SomeComponent' as follow</p>
  
  <pre><code>import SomeComponent from './SomeCoponent'
  export default class SomeComponent extends React.Component {
    render() {
      return (
        &lt;SomeComponent&gt;
            &lt;Text&gt; hello &lt;/Text&gt;
        &lt;/SomeComponent&gt;
      )
    }
  }
  </code></pre>
  
  <p>How does this work?</p>
  
  <p>I saw some blog where some people do this:</p>
  
  <pre><code>export default class SomeComponent extends React.Component {
    render() {
      return (
        &lt;View style={{flex:1}}&gt;
  
          {/* code added here - start */}
          {React.Children.map(this.props.children, c =&gt; React.cloneElement(c, {
            route: this.props.route
          }))}
          {/* code added here - end */}
  
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>But this does not work for me. </p>
  
  <p>I am getting the following error: </p>
  
  <pre><code>Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
  </code></pre>
  
  <p>Any help would be appreciated. Thanks</p>