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
The following dependencies must be installed in your project in order for cinch to work.
styled-components
2.0.0 and up
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' }}>
<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>
)
}
}
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
- Controls the CSS
flexDirection
:string
-horizontal
orvertical
- 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
, orbottom
- Alignment of children along the vertical axis
halign
:string
-left
,center
, orright
- 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