Layit - Layout library for react-native
Layit is a layout library for react native to help position components cleanly and in an expressive way.
Layit offers many of the powerful layout properties which
react-native-row offers while additionally allowing the flexibility of applying these properties onto your predefined components.
Layout should be expressive and clear at a glance, it doesn't help that most of the time layout is mixed with other styles like colour and animations making discovery for them non-obvious.
Following the philosophy of
react-native-row, this library helps keep unnecessary stylesheet declarations that are involved with layout and position.
npm install react-native-layit
yarn add react-native-layit
import React from 'react';import View Text from 'react-native';import Layit from 'react-native-layit';const Box = props<Layit ="50" ="50" />;<Layit><Box = /><Box = /><Box = /></Layit>;
But wait... couldn't I get the same by importing
react-native? I don't see anything different.
Why yes you can! The
Layit component acts as wrapper for
View and tries to be as un-intrusive as possible.
There is also a Higher-order component available for wrapping other component types.
Now, let's get to what this library is for.
Say we wanted things to align horizontally instead of vertically, we can do this without
const Box = style<View =>;<View =><Box = /><Box = /><Box = /></View>;
<Layit =><Box = /><Box = /><Box = /></Layit>;
The layout styles are props and can be utilised cleanly without the need to mangle with the
The style prop will pass through and applied normally, so you can use as much of the API available as you feel comfortable. With that said though, the style prop will override the layout props, if both are defined. So becareful.
<View = =><Box = /><Box = /><Box = /></View>;
The above will use
column instead of
flexDirection in the end. If you'd like style prop to be overridden by the layout props continue reading.
Applying to other components
As mentioned earlier, there is also a Higher-order component available, that means it's easy to use another component instead of
Perhaps you have a button that has been styled with
styled-components, or a panel which has some default padding, use
provideLayout() to wrap those components.
Any style or layout props used will be passed to
SuccessButtonComponent through the
style prop. You'll need to make sure it is continued down the child component you wish the layout props to be applied to.
For example below.
const SuccessButtonComponent = propsconst myStyles =// style logic hereflexDirection: 'column'backgroundColor: 'green';return<View =><Text> a success!</Text><Text>Lets have fun</Text></View>;;
The example has the
style prop provided take precendence over its own defined style, that means the
flexDirection: 'column' could be changed to to
flexDirection: 'row' by using the
You could have it the other way round, but only it cases where you don't want any specific property to change, so if it was flipped in the example to
[props.style, myStyles] then
SuccessButtonComponent will always have
flexDirection: 'column' even if the
row property was used.
Here is a list of available props for the layout
||Reverses the direction of
||number/array[number]||Set the width, could interfer with
||number/array[number]||Set the height, could interfer with
||number/array[number]||Sets margin for top, bottom, left and right. Follows CSS rules for
||number/array[number]||Sets padding for top, bottom, left and right. Follows CSS rules for
||A set of props to pass on to the
||Disables style cache, this could improve performance if you're doing rapid style changes through Layit, although it really depends on whether hashing an object or sending manual styles through is more performant, and also if you're going to re-use any of the styles that you're rapidly changing again. Your mileage may vary|
Here is a table for reference when an enum value is invalid in which case
center is used instead.
Important to note again that if neither
col is defined these props will not take effect, that's because the library cannot tell which direction the flex is running otherwise.
Setting width and height is quite straight forward, setting them directly with
If you want to set
max for height or width, in stylesheet you'd need to define each separately.
I had found that quite verbose for this library and pollutes the property list a fair amount, so instead I've extended the
height property to cleanly allow handling
maxWidth you'll need to define an array for the
width property in the format:
[minWidth, width, maxWidth], and the same applies for
The values provided will need to be a valid number or string (can be a percent), otherwise it will error or be ignored altogether.
An example of the feature:
<Layit = />
This means the following styles are applied:
minWidth: 30width: "60%"maxWidth: 80
Here is a table for what styles are applied when you use the
This behaves like the CSS rules, so if you're familiar with that, you probably already understand how it works.
|[12, 24, 36]||12||36||24||24|
|[12, 24, 36, 48]||12||36||48||24|
Styles take precedence
If there's a
style prop which has a rule conflicting with a layout prop, the style will take precendence. This also applies for
viewProps, if viewProps contains a style property and there's also a style prop, the viewProps style will take precedence.
So the hierarchy goes like this
viewProps.style > style > layoutProps
In order to not have styles overwriting the layoutProps, you should look at shifting those styles into another component which is wrapped by
provideLayout(). Try to keep
provideLayout() at the very top of the stack of wrappers, if possible.
This behaviour is to allow switching between different stylesheets seemlessly for a component without unexpected "it's not changing" scenarios and worrying about overwrites from this library.
const props =margin: 1 1 1 1style:marginBottom: 2marginLeft: 2viewProps:style:marginLeft: 3marginRight: 4;
Will produce the following styles
const flattenedStyles =marginTop: 1marginBottom: 2marginLeft: 3marginRight: 4;
- Positioning props
- Maybe a modal provider?