Row & Col
The Row
and Col
components implement a 12-column grid system for responsive design. Row
provides horizontal alignment, while Col
allows column sizing and offsets across screen sizes. Both integrate with theme contexts, supporting custom styles and additional props for flexible layout management.
Import
Phaselis exports Row and Col components.
import { Row , Col } from "phaselis";
- Col: Main Component import for Column
- Row: Main Component import for Row
Usage
Basic Usage
import { Row, Col } from "phaselis";
import { Text } from "react-native";
const Example = () => {
return (
<Row>
<Col size={2} offset={4}>
<Text>Col 1</Text>
</Col>
<Col size={2} offset={4}>
<Text>Col 2</Text>
</Col>
</Row>
);
};
export default Example;
Row Props
Row is basic View element with style of flex-direction:row
style
ViewStyle
Optional custom styles for the row component.
import { Text } from "react-native";
<Row
style={{
alignItems: "center",
}}
>
<Text>Centered</Text>
</Row>
Col Props
Props provide attributes to define the size and offset of a column within a grid system, allowing for responsive design by specifying different sizes and offsets for various screen sizes.
size
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Defines the column size in the grid. Accepts values from 1 to 12 or 0 for no size.
import { Text } from "react-native";
<Col size={2}>
<Text>Col</Text>
</Col>
offset
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Defines the offset of the column in the grid. Accepts values from 1 to 12 or 0 for no offset.
import { Text } from "react-native";
<Col size={2} offset={4}>
<Text>Col</Text>
</Col>
style
ViewStyle
Optional custom styles for the column component.
import { Text } from "react-native";
<Col
size={6}
style={{
alignItems: "center",
}}
>
<Text>Col with 6 size</Text>
</Col>`