TIC Makers - React Native Flexbox

React native component for flexbox.

Powered by TIC Makers

Demo

Flexbox Expo's snack

Install

Install @ticmakers-react-native/flexbox package and save into package.json:

NPM

$ npm install @ticmakers-react-native/flexbox --save

Yarn

$ yarn add @ticmakers-react-native/flexbox

How to use?

import React from 'react'
import { Col, Grid, Row } from '@ticmakers-react-native/flexbox'

export default class App extends React.Component {

  render() {
    return (
      <Grid>
        <Row size={3}>
          <Title>My example title</Title>
        </Row>

        <Row size={7}>
          <Col>
            <Image source={ require('./assets/image.jpg') } />
          </Col>
        </Row>

        <Row size={2}>
          <Col>
            <Text>Left</Text>
          </Col>

          <Col>
            <Text>Right</Text>
          </Col>
        </Row>
      </Grid>
    )
  }
}

Grid Properties

| Name | Type | Default Value | Definition | | ---- | ---- | ------------- | ---------- | | size (optional) | - | - | -

Row Properties

| Name | Type | Default Value | Definition | | ---- | ---- | ------------- | ---------- | | size (optional) | - | - | -

Col Properties

| Name | Type | Default Value | Definition | | ---- | ---- | ------------- | ---------- | | size (optional) | - | - | -

Todo

• Test on iOS
• Improve and add new features
• Add more styles
• Improve readme (example & demo)
• Create tests

Version 1.0.1 (Changelog)