React-Native: How to wrap Child components under another class component

Question

Let me Explain my question with an example:

in SomeComponent.js I have the following

export default class SomeComponent extends React.Component {   render() {     return (       <View style={{flex:1}}>        </View>     )   } } 

and in Root.js it imports 'SomeComponent' as follow

import SomeComponent from './SomeCoponent' export default class SomeComponent extends React.Component {   render() {     return (       <SomeComponent>           <Text> hello </Text>       </SomeComponent>     )   } } 

How does this work?

I saw some blog where some people do this:

export default class SomeComponent extends React.Component {   render() {     return (       <View style={{flex:1}}>          {/* code added here - start */}         {React.Children.map(this.props.children, c => React.cloneElement(c, {           route: this.props.route         }))}         {/* code added here - end */}        </View>     )   } } 

But this does not work for me.

I am getting the following error:

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) 

Any help would be appreciated. Thanks

Answer 1

You can use this snippet

export default class SomeComponent extends React.Component {   constructor(props) {     super(props)   }    render() {     return (       <View style={{flex:1}}>       {this.props.children}       </View>     )   } } 

Answer 2

You can do it like this

export default class SomeComponent extends React.Component {   render() {     return (       <View>         {this.props.children}       </View>     )   } } 

YupeComponent.js

import 'SomeComponent' from 'app/component/Somecomponent' export default class YupeComponent extends React.Component {   render() {     return (       <View style={{flex:1}}>          <SomeComponent />       </View>     )   } }