How to implement custom component that accepts a nested component?

Question

I would like to implement a custom component that accepts a nested component. Something that can be used like this.

<MyCustomComponent>
  <AnyNestedComponent/>
</MyCustomComponent>

I searched about this but only found the use of this.props, which is not what I expect.

How do I implement MyCustomComponent in React Native version 0.68?

Note: MyCustomComponent will consist of View(s).

Answer 1

Its fairly simple in RN,

Your customComponent should be like =

const CumstomComp = ({props = {}, children = null}) => {

return(
<View style={{backgroundColor:"red"}} >

{children}

</View>

)

}

and then you use it like this

App.js or whatever file

const App = () => {

return(
<View>
 <CustomComp>
  <Flatlist />
  <View />
 </CustomComp>
</View>
)

}

Hope it helps. feel free for doubts