Grid

React Native Store 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>

Output

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>

Output

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>

Output

Container

Props	Required	Default
style	No
style.paddingHorizontal	No	15

Row

Props	Required	Default
style	No
style.marginHorizontal	No	-10
nomargin	No	false

Column

Props	Required	Default
flex	No	0.5
align	No	flex-start
style	No
style.paddingHorizontal	No	10
nopadding	No	false