Grid stops working when adding Row Col using child component

[nechmads]

If I do something like:
<Grid> <Row> <Col> <Text>1</Text> </Col> </Row> <Row> <Col> <Text>2</Text> </Col> </Row> </Grid>
everything is working fine.

BUT - if I do something like:
<Grid> <MyHeader /> <Row> <Col> <Text>2</Text> </Col> </Row> </Grid>

And MyHeader is:

const MyHeader = () => { return ( <Row> <Col> <Text>1</Text> </Col> </Row> ) }

The grid totally breaks down and the row somehow displayed 20 pixels from the right edge of the screen.
Basically - if you put a Row element through a custom component the grid breaks. Can't understand why...

I use React Native 0.62

[pbrazdil]

shouldn't MyHeader be wrapped with as well?

[tdotdm]

I had the same issue as @nechmads. As suggested by @pbrazdil , wrapping my custom component in Grid fixed the issue.