Grid

React Native Food Ordering App UI template provides you a clean list of components which helps you to generate grid with minimal efforts. See below samples

Sample 2 Columns

<Container>
    <Row>
        <Column>
            <P>Column 1 (50%)</P>
        </Column>
        <Column>
            <P>Column 2 (50%)</P>
        </Column>
    </Row>
</Container>

Sample 3 Columns with align props

<Container>
    <Row>
        <Column flex={.33}>
            <SupSm>Column 1 (33%)</SupSm>
        </Column>
        <Column flex={.33}>
            <SupSm>Column 2 (33%)</SupSm>
        </Column>
        <Column flex={.34} alig={'flex-end'}>
            <SupSm>Column 3 (33%)</SupSm>
        </Column>
    </Row>
</Container>

Sample 2 Columns with different width

<Container>
    <Row>
        <Column flex={.7}>
            <P>Column 1 (70%)</P>
        </Column>
        <Column flex={.3}>
            <SupSm>Column 2 (30%)</SupSm>
        </Column>
    </Row>
</Container>

Container

Row

Column

Last updated