react-native-simple-layout

A simple semantic layout for react-native.

Install

use yarn

yarn add react-native-simple-layout

use npm

npm i react-native-simple-layout

Example

function RectList() {
  return (
    <>
      <Rect text={1} style={{ backgroundColor: 'red' }} />
      <Rect text={2} style={{ backgroundColor: 'green' }} />
      <Rect text={3} style={{ backgroundColor: 'blue' }} />
    </>
  );
}

Row

import { Row } from 'react-native-simple-layout';

function RowExample() {
  return (
    <Row>
    	<RectList />
    </Row>
  );
}

Column

import { Column } from 'react-native-simple-layout';

function ColumnExample() {
  return (
    <Column>
    	<RectList />
    </Column>
  );
}

Stack

import { Row, Stack } from 'react-native-simple-layout';

function StackExample() {
  return (
    <Row>
      <Rect text={1} />
      <Stack style={{ left: 30, top: 30 }}>
        <Rect text={2} style={{ backgroundColor: 'green' }} />
        <Stack style={{ left: 30, top: 30 }}>
          <Rect text={3} style={{ backgroundColor: 'blue' }} />
        </Stack>
      </Stack>
    </Row>
  );
}