How to create a React component without adding component to the JSX tree

Question

I am building a simple custom table component using https://github.com/GeekyAnts/react-native-easy-grid . Now I have 4 custom components, Table, TRow, ThColumn, TdColumn. As you can guess this hierarchy works just as in Html and these components just adds some custom styles like making header text grey and not needed to write Text component every time etc. now when I build a table with my new and shiny components, it doesn't work.

This is what each of these components looks like. Table

({children, ...props}) => <Grid {...props}><Text>{children}</Text></Grid>

TRow

({children, ...props}) => <Row {...props}><Text>{children}</Text></Row>

TdColumn/ThColumn

({children, ...props}) => <Col {...props}><Text>{children}</Text></Col>

As you can see these components are not doing very much. TRow and ThColumn have some custom styles like margin and colour but nothing related to flexbox.

This works

    <Grid>
      <Row>
        <Col><Text>Some Heading</Text></Col>
      </Row>
      <Row>
        <Col><Text>Some Text</Text></Col>
      </Row>
    </Grid>

This doesn't work (I am getting all the text in the same line)

    <Table>
      <TRow>
        <ThColumn>Some Heading</ThColumn>
      </TRow>
      <Trow>
        <TdColumn>Some Text</TdColumn>
      </Trow>
    </Table>

Now I think, because there is trow on top of row and thcolumn/tdcolumn on top of actual col this is breaking.

I would like answers for>

1. Am I right?
2. If I am right how can i create components which would return actual row and col instead of thcolumn and trow.

Answer 1

Seeing your components definitions, I guess you're missing the Text component in the Col definition. Remember that you cannot render text without using Text in React Native.

So I'd define Col like this

({children, ...props}) => <Col {...props}><Text>{children}</Text></Col>

Also you have a typo in the second "Trow". It should say "TRow".

Finally, it'd be desirable if you could provide the full components definitions in something like Codesandbox

Hope it helps