Build React Native apps layout blazingly fast in Flutter style
Icon made by Vectors Market from www.flaticon.com
Overview
This package is not a UI framework.
It contains components that will let you save the 80% of your time while building your UI.
It contains alignment primitives and its uses resembles to the layout widgets used in Flutter.
Components
Column
Row
Features
Alignments
Both Row and Column components accepts props to align them and/or the children through these two props:
<Row > <Text>Hi</Text></Row>Here's the props you can use to align the children of a component (justifyContent/alignItems):
xLeft
xCenter
xRight
yLeft
yCenter
yRight
Here's the props you can use to align the component (selfAlign/justifySelf*):
s-xLeft
s-xCenter
s-xRight
s-yLeft
s-yCenter
s-yRight
PS: finally you won't get crazy no more remembering which flex prop you should use between the two directions
*justifySelf doesn't exist in React Native. We achieve the same behaviour through auto margins
Debugging your UI
In order to debug your UI and understand where your views are, you can enable light or dark debugging and this lib will apply a border (light or dark) to all the components you're using.
<Column > <Text>Hi</Text></Column><Column > <Text>Hi</Text></Column>fast-layout at work
video
TODO
- replace missing justifyself behaviour with auto margins (read: https://stackoverflow.com/a/54973125/2809729 or https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties?rq=1)