react-native-ui-labs

react-native-ui-labs

Yet another UI library for React Native

Installation

npm install react-native-ui-labs

Layout

Maybe I'm the only one, but for some reason I just keep forgetting which flex-box property controls what and what I need to do to align things the way I want. UILabs Layout compoenent are here to try and help. They don't do anything super fancy, but simply gives you a way to describe your user interface alignment in easier to remember terms.

Each Col, Row Or Center compoenents translates to a view and any prop you pass will be passed to this view. You can always override any style or add your own by passing in the style prop.

You can control the flex size property using the Size prop on both Row and Col components. In the example demo app you can find different demos that highlite different layouts you can create. And again - if there is something these componentd don't do, you can always combine them with regular Views and flex-box or override their style.

Examples

Horizontal alignment and sizing of columns

import * as React from 'react';
import { Text } from 'react-native';
import { Row, Alignment, Col } from 'react-native-ui-labs';

export default function App() {
  // Horizontal alignment and sizing of columns
  return (
    <Row style={{ marginTop: 50 }}>
      <Col
        size={2}
        style={{ backgroundColor: '#FDB0C0' }}
        horizontalAlign={Alignment.End}
      >
        <Text>One</Text>
      </Col>
      <Col
        style={{ backgroundColor: '#ED0DD9' }}
        horizontalAlign={Alignment.Center}
      >
        <Text>Two</Text>
      </Col>
      <Col
        style={{ backgroundColor: '#FD4659' }}
        horizontalAlign={Alignment.Start}
      >
        <Text>Three</Text>
      </Col>
    </Row>
  );
}

Vertical alignment of columns

import * as React from 'react';
import { Text } from 'react-native';
import { Row, Alignment, Col } from 'react-native-ui-labs';

export default function App() {
  // Vertical alignment of columns

  return (
    <Row style={{ marginTop: 50 }}>
      <Col
        style={{ backgroundColor: '#FDB0C0', height: 300 }}
        horizontalAlign={Alignment.End}
        verticalAlign={Alignment.Center}
      >
        <Text>One</Text>
      </Col>
      <Col
        style={{ backgroundColor: '#ED0DD9', height: 300 }}
        horizontalAlign={Alignment.Center}
        verticalAlign={Alignment.SpaceAround}
      >
        <Text>Two</Text>
        <Text>Another Two</Text>
        <Text>And another Two</Text>
      </Col>
      <Col
        style={{ backgroundColor: '#FD4659', height: 300 }}
        horizontalAlign={Alignment.Start}
        verticalAlign={Alignment.End}
      >
        <Text>Three</Text>
      </Col>
    </Row>
  );
}

Vertical alignment and sizing of rows

import * as React from 'react';
import { Text } from 'react-native';
import { Row, Alignment, Col } from 'react-native-ui-labs';

export default function App() {
  // Vertical alignment and sizing of rows

  return (
    <Col style={{ marginTop: 50 }}>
      <Row
        style={{ backgroundColor: '#107AB0' }}
        size={2}
        verticalAlign={Alignment.Center}
      >
        <Text>One</Text>
      </Row>
      <Row style={{ backgroundColor: '#FDC1C5' }} verticalAlign={Alignment.End}>
        <Text>Two</Text>
      </Row>
      <Row
        style={{ backgroundColor: '#FD5956' }}
        verticalAlign={Alignment.Start}
      >
        <Text>Three</Text>
      </Row>
    </Col>
  );
}

Vertical alignment and sizing of Rows

import * as React from 'react';
import { Text } from 'react-native';
import { Row, Alignment, Col } from 'react-native-ui-labs';

export default function App() {
  // Vertical alignment of columns

  return (
    <Col style={{ marginTop: 50 }}>
      <Row
        style={{ backgroundColor: '#107AB0', width: '100%' }}
        height={200}
        verticalAlign={Alignment.Center}
        horizontalAlign={Alignment.Center}
      >
        <Text>One</Text>
      </Row>
      <Row
        style={{ backgroundColor: '#FDC1C5', width: 300 }}
        verticalAlign={Alignment.End}
        horizontalAlign={Alignment.End}
        height={300}
      >
        <Text>Two</Text>
      </Row>
      <Row
        style={{ backgroundColor: '#FD5956', width: 300 }}
        verticalAlign={Alignment.Start}
        horizontalAlign={Alignment.SpaceBetween}
        height={100}
      >
        <Text>Three</Text>
        <Text>Three</Text>
        <Text>Three</Text>
      </Row>
    </Col>
  );
}

I just want to center stuff

import * as React from 'react';
import { Text } from 'react-native';
import { Row, Alignment, Col } from 'react-native-ui-labs';

export default function App() {
  // Simple centering

  return (
    <Center
      vertical
      horizontal
      style={{ width: '100%', height: '100%', backgroundColor: '#FDC1C5' }}
    >
      <Text>Dead center</Text>
    </Center>
  );
}

License

MIT