react-native-fast-layout

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 xCenter yCenter s-xLeft>
  <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 lightDebug>
  <Text>Hi</Text>
</Column>

<Column darkDebug>
  <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)