React Stacked

Building blocks for robust cross-platform layouts.

The vision of React Stacked is not to provide any styling or be a full-featured UI library, instead it aims to provide low lever primitives that works the same on different platforms.

Currently supported platforms:

• React (react-dom)
• React Native (react-native or expo)

Installation

npm install --save react-stacked

Usage

const { HStack, Text, VStack } = require('react-stacked')

const React = require('react')
const { render } = require('react-dom')

const Example = () => (
  <VStack height='150px'>
    <HStack justifyContent='space-between'>
      <Text>Left</Text>
      <Text>Right</Text>
    </HStack>

    <HStack alignItems='center' justifyContent='center' grow='1'>
      <Text>Center</Text>
    </HStack>
  </VStack>
)

render(<Example />)

Left                             Right



                Center

Components

<TextStyle>

An inline text span

Property	Required	Type
color	optional	string
decorationLine	optional	'none' | 'underline' | 'line-through' | 'underline line-through'
size	optional	string | number
transform	optional	'none' | 'capitalize' | 'uppercase' | 'lowercase'
weight	optional	'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
children	optional	React.ReactNode

<Text>

A block of text

Property	Required	Type	Comment
align	optional	'left' | 'right' | 'center' | 'justify' | null
allowFontScaling	optional	boolean	Specifies whether fonts should scale to respect Text Size accessibility settings on supported platforms.
color	optional	string
decorationLine	optional	'none' | 'underline' | 'line-through' | 'underline line-through'
numberOfLines	optional	number | null	Limit the text to the specified number of lines.
rotate	optional	number	Rotate the text by the specified degrees. The origin of the transformation follows the text alignment.
size	optional	string | number
transform	optional	'none' | 'capitalize' | 'uppercase' | 'lowercase'
weight	optional	'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
alignSelf	optional	'baseline' | 'center' | 'end' | 'start' | 'stretch'	Override alignment along the cross axis for this item.
width	optional	string | number	The width of the container.
minWidth	optional	string | number	The minimum width of the container.
maxWidth	optional	string | number	The maximum width of the container.
height	optional	string | number	The height of the container.
minHeight	optional	string | number	The minimum height of the container.
maxHeight	optional	string | number	The maximum height of the container.
basis	optional	string | number	The flex basis of the container.
grow	optional	string | number	The flex grow factor of the container.
shrink	optional	string | number	The flex shrink factor of the container.
padding	optional	string | number
paddingBottom	optional	string | number
paddingHorizontal	optional	string | number
paddingLeft	optional	string | number
paddingRight	optional	string | number
paddingTop	optional	string | number
paddingVertical	optional	string | number
borderRadius	optional	number
borderBottomLeftRadius	optional	number
borderBottomRightRadius	optional	number
borderTopLeftRadius	optional	number
borderTopRightRadius	optional	number
borderColor	optional	string
borderBottomColor	optional	string
borderLeftColor	optional	string
borderRightColor	optional	string
borderTopColor	optional	string
borderStyle	optional	'solid' | 'dotted' | 'dashed'
borderWidth	optional	string | number
borderBottomWidth	optional	string | number
borderLeftWidth	optional	string | number
borderRightWidth	optional	string | number
borderTopWidth	optional	string | number
backgroundColor	optional	string
children	optional	React.ReactNode

<HStack>

A horizontal stack

Property	Required	Type	Comment
alignItems	optional	'baseline' | 'center' | 'end' | 'start' | 'stretch'	How to align children along the cross axis.
justifyContent	optional	'center' | 'end' | 'start' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly'	How to align children within the main axis.
wrap	optional	boolean	What happens when children overflow along the main axis.
gap	optional	number	The size of the gaps (gutters) between rows and columns.
rowGap	optional	number	The size of the gap (gutter) between an element's rows.
columnGap	optional	number	The size of the gap (gutter) between an element's columns.
alignSelf	optional	'baseline' | 'center' | 'end' | 'start' | 'stretch'	Override alignment along the cross axis for this item.
width	optional	string | number	The width of the container.
minWidth	optional	string | number	The minimum width of the container.
maxWidth	optional	string | number	The maximum width of the container.
height	optional	string | number	The height of the container.
minHeight	optional	string | number	The minimum height of the container.
maxHeight	optional	string | number	The maximum height of the container.
basis	optional	string | number	The flex basis of the container.
grow	optional	string | number	The flex grow factor of the container.
shrink	optional	string | number	The flex shrink factor of the container.
padding	optional	string | number
paddingBottom	optional	string | number
paddingHorizontal	optional	string | number
paddingLeft	optional	string | number
paddingRight	optional	string | number
paddingTop	optional	string | number
paddingVertical	optional	string | number
borderRadius	optional	number
borderBottomLeftRadius	optional	number
borderBottomRightRadius	optional	number
borderTopLeftRadius	optional	number
borderTopRightRadius	optional	number
borderColor	optional	string
borderBottomColor	optional	string
borderLeftColor	optional	string
borderRightColor	optional	string
borderTopColor	optional	string
borderStyle	optional	'solid' | 'dotted' | 'dashed'
borderWidth	optional	string | number
borderBottomWidth	optional	string | number
borderLeftWidth	optional	string | number
borderRightWidth	optional	string | number
borderTopWidth	optional	string | number
backgroundColor	optional	string
children	optional	React.ReactNode

<VStack>

A vertical stack

Property	Required	Type	Comment
alignItems	optional	'baseline' | 'center' | 'end' | 'start' | 'stretch'	How to align children along the cross axis.
justifyContent	optional	'center' | 'end' | 'start' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly'	How to align children within the main axis.
wrap	optional	boolean	What happens when children overflow along the main axis.
gap	optional	number	The size of the gaps (gutters) between rows and columns.
rowGap	optional	number	The size of the gap (gutter) between an element's rows.
columnGap	optional	number	The size of the gap (gutter) between an element's columns.
alignSelf	optional	'baseline' | 'center' | 'end' | 'start' | 'stretch'	Override alignment along the cross axis for this item.
width	optional	string | number	The width of the container.
minWidth	optional	string | number	The minimum width of the container.
maxWidth	optional	string | number	The maximum width of the container.
height	optional	string | number	The height of the container.
minHeight	optional	string | number	The minimum height of the container.
maxHeight	optional	string | number	The maximum height of the container.
basis	optional	string | number	The flex basis of the container.
grow	optional	string | number	The flex grow factor of the container.
shrink	optional	string | number	The flex shrink factor of the container.
padding	optional	string | number
paddingBottom	optional	string | number
paddingHorizontal	optional	string | number
paddingLeft	optional	string | number
paddingRight	optional	string | number
paddingTop	optional	string | number
paddingVertical	optional	string | number
borderRadius	optional	number
borderBottomLeftRadius	optional	number
borderBottomRightRadius	optional	number
borderTopLeftRadius	optional	number
borderTopRightRadius	optional	number
borderColor	optional	string
borderBottomColor	optional	string
borderLeftColor	optional	string
borderRightColor	optional	string
borderTopColor	optional	string
borderStyle	optional	'solid' | 'dotted' | 'dashed'
borderWidth	optional	string | number
borderBottomWidth	optional	string | number
borderLeftWidth	optional	string | number
borderRightWidth	optional	string | number
borderTopWidth	optional	string | number
backgroundColor	optional	string
children	optional	React.ReactNode

<ZStack>

A stack with depth

Property	Required	Type	Comment
align	optional	'center' | 'end' | 'start'	How to align children along both axis.
alignHorizontal	optional	'center' | 'end' | 'start'	How to align children horizontally.
alignVertical	optional	'center' | 'end' | 'start'	How to align children vertically.
alignSelf	optional	'baseline' | 'center' | 'end' | 'start' | 'stretch'	Override alignment along the cross axis for this item.
width	optional	string | number	The width of the container.
minWidth	optional	string | number	The minimum width of the container.
maxWidth	optional	string | number	The maximum width of the container.
height	optional	string | number	The height of the container.
minHeight	optional	string | number	The minimum height of the container.
maxHeight	optional	string | number	The maximum height of the container.
basis	optional	string | number	The flex basis of the container.
grow	optional	string | number	The flex grow factor of the container.
shrink	optional	string | number	The flex shrink factor of the container.
padding	optional	string | number
paddingBottom	optional	string | number
paddingHorizontal	optional	string | number
paddingLeft	optional	string | number
paddingRight	optional	string | number
paddingTop	optional	string | number
paddingVertical	optional	string | number
borderRadius	optional	number
borderBottomLeftRadius	optional	number
borderBottomRightRadius	optional	number
borderTopLeftRadius	optional	number
borderTopRightRadius	optional	number
borderColor	optional	string
borderBottomColor	optional	string
borderLeftColor	optional	string
borderRightColor	optional	string
borderTopColor	optional	string
borderStyle	optional	'solid' | 'dotted' | 'dashed'
borderWidth	optional	string | number
borderBottomWidth	optional	string | number
borderLeftWidth	optional	string | number
borderRightWidth	optional	string | number
borderTopWidth	optional	string | number
backgroundColor	optional	string
children	optional	React.ReactNode