Skip to content
Making React Native layouts a cinch
Branch: master
Clone or download
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 Initial commit Feb 8, 2019 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 Initial commit Feb 8, 2019
yarn.lock Added prettierrc Feb 19, 2019

Cinch Logo Fixed


npm version


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


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


npm install --save cinch-layout


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' }}>
          <CinchBounds flex={1} debug flexDirection="vertical">
            <CinchBox debug style={{ width: '50%' }}>

            <CinchBox flex={2} debug={true}>

            <CinchBox flex={1} debug={true}>
            <CinchBox debug valign={'center'} halign="right">
            <CinchBox debug style={{ marginHorizontal: 20 }}>


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





  • 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



  • 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.