React-Native: How to wrap Child components under another class component : <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>
