React Native Cols
Grid for React Native Apps.
Installation
npm i react-native-cols
Usage
import React, { Component } from 'react'
import { Text } from 'react-native'
import { Cols, Col } from 'react-native-cols'
class Screen extends Component {
render() {
return (
<Cols>
<Col>
<Text>First</Text>
</Col>
<Col span={2}>
<Text>Second</Text>
</Col>
<Col>
<Text>Third</Text>
</Col>
</Cols>
)
}
}Props
// Wrapper component with possible props and their defaults.
<Cols
cols={4}
padding={20}
colSpace={10}
rowSpace={15}
debug={false}
style={}
colStyle={}
>
// Column component with defaults added.
<Col
span={1}
offset={0}
left={true}
center={false}
right={false}
style={}
></Col>
</Cols><Cols />
The wrapper component sets the defaults for all <Col /> components wrapped.
cols The number of columns per row.
padding The padding around the cols.
colSpace The horizontal space between cols.
rowSpace The vertical space between rows.
debug Highlights cols with a light grey background.
style Optional styles for the wrapper component.
colStyle Optional styles applied to every col, possibly overriding generated
values.
<Col />
The column can be a configured with the following props:
span How many columns the current column should take up.
offset Empty columns to the left of the current column.
left/center/right Denotes how the content should be aligned horizontally.
style Optional styles added to the component, possibly overriding generated
values.
Development
This plugin was build with create-react-native-plugin please refer to it's documentation on how to run the example app and make changes.