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).

Gaurav Roy · Accepted Answer · 2022-08-22 09:36:51Z

2

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

answered Aug 22, 2022 at 8:10

Gaurav Roy

12.4k3 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1