Skip to content
Making React Native layouts a cinch
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Removed default flex 1 from box component Jul 19, 2019
.eslintrc.js Updated eslintrc Feb 19, 2019
.gitignore Added cinch files Feb 19, 2019
.prettierrc Added prettierrc Feb 19, 2019
CODE_OF_CONDUCT.md Initial commit Feb 8, 2019
README.md Fix typos in README Jul 2, 2019
cinch-logo.png Fixed iamge Feb 8, 2019
index.d.ts Fixed types Jul 2, 2019
index.js Fixed issues with imports Feb 19, 2019
layout.png Added logo Feb 8, 2019
notes.md Initial commit Feb 8, 2019
package.json
yarn.lock Added prettierrc Feb 19, 2019

README.md

Cinch Logo Fixed

NPM

npm version

Cinch

Simplifying React Native Flexbox layouts.

Hedron inspired layout library using styled components.

This is a new package and so is in beta release. Please leave feedback in the issues section on GitHub with any bugs or suggestions. Thanks

Get Started

Requirements

The following dependencies must be installed in your project in order for cinch to work.

Installation

npm install --save cinch-layout

Usage

import * as React from 'react';
import { SafeAreaView, Text } from 'react-native';
import { CinchProvider, CinchBounds, CinchBox } from 'cinch-layout'

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
        <CinchProvider>
          <CinchBounds flex={1} debug flexDirection="vertical">
            <CinchBox debug style={{ width: '50%' }}>
              <Text>Hello</Text>
            </CinchBox>

            <CinchBox flex={2} debug={true}>
              <Text>Hello</Text>
            </CinchBox>

            <CinchBox flex={1} debug={true}>
              <Text>Hello</Text>
            </CinchBox>
          </CinchBounds>
          <CinchBounds>
            <CinchBox debug valign={'center'} halign="right">
              <Text>Hello</Text>
            </CinchBox>
            <CinchBox debug style={{ marginHorizontal: 20 }}>
              <Text>Hello</Text>
            </CinchBox>
          </CinchBounds>
        </CinchProvider>
      </SafeAreaView>
    )
  }
}

Documentation

All Components accept the following props. The style props can also be passed as usual which will overwrite any conflicting styles.

CinchProvider

Props

CinchBounds

Props

  • debug : boolean
    • Outlines the grid system so you can visualize the layout
  • flex: number - structure: 2
    • Controls the CSS flex property
  • flexDirection: string - horizontal or vertical
    • Sets the primary axis the children should be in line with
  • wrap: boolean
    • Sets whether the children should wrap when there's no more room on the primary axis
  • valign: string - top, center, or bottom
    • Alignment of children along the vertical axis
  • halign: string - left, center, or right
    • Alignment of children along the horizontal axis

CinchBox

Props

  • debug : boolean
    • Outlines the grid system so you can visualize the layout
  • flex: string - structure: grow shrink basis
You can’t perform that action at this time.