Components

Base

---

Base

A general purpose component that converts props into stylesdefined by our theme. It's heavily inspired by the Basecomponent provided by rebass.

Props

Component any
Custom Component

baseStyle any
The base style will be supplanted by style props, or regular style properties.

style any
Regular style attribute

underlayColor string
Underlay color. Use ‘darken’ to automatically darken the backgroundColor.

m enum(0,1,2,3,4)
Margin based on the configured scale

mt enum(0,1,2,3,4)
Margin top based on the configured scale

mr enum(0,1,2,3,4)
Margin right based on the configured scale

mb enum(0,1,2,3,4)
Margin bottom based on the configured scale

ml enum(0,1,2,3,4)
Margin left based on the configured scale

mx enum(0,1,2,3,4)
Margin x-axis based on the configured scale

my enum(0,1,2,3,4)
Margin y-asix based on the configured scale

p enum(0,1,2,3,4)
Padding based on the configured scale

pt enum(0,1,2,3,4)
Padding top based on the configured scale

pr enum(0,1,2,3,4)
Padding right based on the configured scale

pb enum(0,1,2,3,4)
Padding bottom based on the configured scale

pl enum(0,1,2,3,4)
Padding left based on the configured scale

px enum(0,1,2,3,4)
Padding x-axis based on the configured scale

py enum(0,1,2,3,4)
Padding y-axis based on the configured scale

backgroundColor string
Background color.

rounded union(bool,number)
Border radius

borderColor string
Border color

flex number
Flex property

wrap bool
Flex-wrap property

column bool
Set the flex-direction to column

row bool
Set the flex-direction to row

align string
Align-items property

justify string
Justify-content property

height number
The height of the element

width number
The width of the element

TextBase

A general purpose text component whichconverts props into styles defined in the configuration.Unlike Base, TextBase supports special Text props.

Props

Component any

style any

baseStyle any

fontSize enum(0,1,2,3,4,5,6)
text size *

lineHeight enum(0,1,2,3,4,5,6)
text lineheight *
defaultValue: 1

color string
text colour *
defaultValue: 'default'

textAlign string
text alignment *

bold bool
bold font weight *

thin bool
thin font weight *

thick bool
thick font weight *

inverted bool
use the inverted color (by default, white) *

m enum(0,1,2,3,4)
Margin *

mt enum(0,1,2,3,4)
Margin top *

mr enum(0,1,2,3,4)
Margin right *

mb enum(0,1,2,3,4)
Margin bottom *

ml enum(0,1,2,3,4)
Margin left *

mx enum(0,1,2,3,4)
Margin x-axis *

my enum(0,1,2,3,4)
Margin y-asix *

p enum(0,1,2,3,4)
Padding *

pt enum(0,1,2,3,4)
Padding top *

pr enum(0,1,2,3,4)
Padding right *

pb enum(0,1,2,3,4)
Padding bottom *

pl enum(0,1,2,3,4)
Padding left *

px enum(0,1,2,3,4)
Padding x-axis *

py enum(0,1,2,3,4)
Padding y-axis *

backgroundColor string
Background color *

rounded union(bool,number)
Border radius *

borderColor string
Border color *

flex number
flex property *

wrap bool
flex-wrap property *

column bool
set flex-direction to column *

row bool
set flex-direction to row *

align string
set align-items property *

justify string
set justify-content property *

height number
set the height of the element *

width number
set the width of the element *

Buttons

---

Button

A basic button that inherits from Base, and provides colourizationbased upon background color configuration.
Composes: Base, Text, Icon

Props

tiny bool
button size

small bool

medium bool

large bool

giant bool

primary bool
Uses the primary colour to style the button.

secondary bool
Uses the secondary colour to style the button.

positive bool
Uses the positive colour to style the button.

negative bool
Uses the negative colour to style the button.

default bool
Uses the midgray colour to style the button.

outline bool
Use an outline button style *
defaultValue: false

disabled bool
disables the button, and reduces its opacity
defaultValue: false

rounded union(number,bool)
defaultValue: 6

onPress func

underlayColor string

backgroundColor string

borderColor string

block bool
stretch the button width
defaultValue: false

icon union(string,node)
optional icon string or node

size __
defaultValue: 'medium'

ButtonGroup

Props

rounded union(bool,number)

vertical bool

segmented bool
A helper to create segemented controls that align together *

Card

---

Card

A very basic Card wrapper
Composes: Base

Props

inverted bool

CardHeader

A very basic card header, which includes an optional avatar,title, subtitle, and children
Composes: Base, Image, Text

Props

avatar union(string,node)

title union(string,node)

subtitle union(string,node)

Icons

---

BaseIcon

Our base icon component that all other iconscompose. It uses ionicons, as provided byreact-native-vector-icons

Props

name string (required)

size number
defaultValue: 25

Icon

Our base icon component that all other iconscompose. It uses Ionicons 3, as provided byreact-native-vector-icons on Android and iOS.To use this on the web, you must include a linktag to the Ionicons 3 stylesheet.Platforms: ios, android, web
Composes: TextBase

Props

name string

size number
defaultValue: 35

color string

BaseIcon

Props

size number
defaultValue: 25

name string

CheckMark

A basic CheckMark that can either be uncheckedor checked.Platforms: ios, android, web
Composes: Base, Icon

Props

isChecked bool
defaultValue: false

size number
defaultValue: 30

uncheckedColor string
defaultValue: 'light'

checkedColor string
defaultValue: 'positive'

checkMarkIconName string
defaultValue: 'ios-checkmark-circle-outline'

uncheckedIconName string
defaultValue: 'ios-radio-button-off'

ArrowRightIcon

PlusIcon

CloseIcon

BackIcon

SearchIcon

MoreIcon

TouchableIcon

A touchable wrapper for <Icon />

Props

onPress func (required)

accessibilityLabel string (required)

disabled bool

style object

Image

---

Image

Fade-in an image when it loads.

Props

fade bool
defaultValue: true

onLoadEnd func

height number

width number

circular bool
set the border radius to be fully round (given an equal height/width)
defaultValue: false

style any

source object (required)

resizeMode string
defaultValue: 'cover'

rounded union(number,bool)
the border radius of the image
defaultValue: false

Input

---

Input

A basic input
Composes: Text

Props

tiny bool

large bool

small bool

medium bool

giant bool

inverted bool

placeholderTextColor string
defaultValue: '#888'

Nav

---

NavBar

Static navigation bar that mimics that foundwithin ReactNative. To be used when you want a staticrepresentation of the NavBar, without transitions.
Composes: Base, NavTitle

Props

title string

LeftButton node

RightButton node

style any

transparent bool

backgroundColor string

titleColor string

inverted bool

NavIconContainer

A wrapper for <Icon /> that positions it correctlyin a navigation bar.

Props

NavTitle

Renders text stylized for the Navigation Bar title.On iOS it composes PrimaryText.On Android, it composes LargeText.
Composes: Text

Props

label string

color string

style any

inverted bool

NavTouchableIcon

Wrap Icon components within NavTouchableIcon for displayof an Icon in the Navigation bar. You may need to fiddlearound with the sizing of the Icon on android and ios devicesto ensure that they look right.

Props

onPress func (required)

NavTouchableText

Makes a touchable text component for the NavBar. Typicallyused on iOS.
Composes: TextBase

Props

disabled bool

color string
defaultValue: 'primary'

bold bool

inverted bool

Pages

---

ErrorPage

Display an error, with messages and actions dependingupon the user state. Particularly useful with Relay.Rendererwhen an error state and retry function are provided.

Props

retry func (required)

message string
defaultValue: 'Hmm, loading appears to be taking a while.'

detailMessage string
defaultValue: 'It\'s possible that our server are under heavy load, ' + 'or that your internet connection is slow. Please try again.'

offlineMessage string
defaultValue: 'Please ensure that you are connected to the internet.'

style any

isOffline bool
defaultValue: false

inverted bool

Loader

Displays a loading indicator, and on iOS an optionalloading message.

Props

isLoading bool
defaultValue: true

large bool
defaultValue: false

color string
defaultValue: 'gray'

showText bool
defaultValue: true

loadingText string
defaultValue: 'Loading...'

alignTop bool
defaultValue: false

inverted bool

Popup

---

Popup

Props

showing bool (required)

onRequestClose func (required)

autoDismiss bool
defaultValue: true

showCancel bool
defaultValue: true

backgroundColor string
defaultValue: 'rgba(0,0,0,0.6)'

modalProps object
defaultValue: {}

customHeader node

options union(arrayOf,arrayOf) (required)

Row

---

Divider

A simple component used to separate rows, with anoptional inset margin on the left or right.

Props

inset number
defaultValue: 0

insetRight number
defaultValue: 0

inverted bool
Use the inverted colour *

SectionHeader

SectionHeader is used for rendering a section header within a ListView.Supply text as the child.
Composes: Base

Props

backgroundColor string
defaultValue: 'gray'

TouchableRow

The basic RowCell for use within ListView. It displaysan image, primary text, secondary text, a value,and an arrow right icon if the respective props arespecified.Platforms: ios, android, web
Composes: TouchableRowCell, Image, Text

Props

primaryText union(string,node)

secondaryText union(string,node)

value union(string,node)
A value attribute of the cell, to appear on the right

onPress func (required)

image union(object,node)
An thumbnail to be displayed on the left of the cell

height number

inverted bool

showMore bool
Displays a right arrow on the right hand side of the cell

TouchableRowCell

A touchable row cell container, typically usedrendering rows in a <ListView>.

Props

onPress func

disabled bool
defaultValue: false

highlighted func
defaultValue: function noop () {}

showMore bool
defaultValue: true

showMoreProps object

underlayColor string
defaultValue: 'rgba(0,0,0,0.1)'

height number

RowInput

---

InputAddRow

An InputTouchable with a plus icon. This is typically usedwithin the context of an InputGroup consisting ofremovable inputs.Platforms: ios, android, web
Composes: InputTouchable, Icon

Props

backgroundColor string

onPress func (required)

label string (required)

disabled bool

InputDatePicker

InputDatePicker a cross-platform InputRow inputtingdates.On iOS devices, the row examples to revealDatePickerIOS when selected. The humanized date shouldbe supplied as the value prop, and it should beupdated when the value of the date-picker changes.On Anroid, the date-picker prompts the user to selecta date in a modal menu.Platforms: ios, android
Composes: InputTouchable

Props

expanded bool (required)

onToggleExpansion func (required)
function called to toggle the visibility of the date-picker. (iOS only) *

value string
the currently selected date to be displayed in collapsed row. *

maxDate string

minDate string

label string

mode string

date object (required)

onDateChange func (required)

editable bool
defaultValue: true

inverted bool

InputDatePickerWeb

InputExpandable

An input row field that expands when pressed to reveal itschildren.Platforms: ios, android, web

Props

expanded bool (required)

Row node (required)

InputGroup

Wrapping components with InputGroup gives you theoption of giving Inputs dividing borders, dividingborders with an inset, a top border (with a unique inset value),a bottom border (with a unique inset value), shared backgroundcolours, margins, and a label. You could supply your ownchild components, too.Platforms: ios, android, web
Composes: Base, Divider, SectionHeader

Props

style object

inset number
left margin inset for the divider border (excluding top and bottom)
defaultValue: 0

showTopBorder bool
show the top border
defaultValue: true

showBottomBorder bool
show the bottom border
defaultValue: true

showBorder bool
whether to show the dividing border
defaultValue: true

topInset number
left margin inset for the top border
defaultValue: 0

bottomInset number
left margin inset for the bottom border
defaultValue: 0

label string
a label for the input group

backgroundColor string

inverted bool

InputHelpText

InputHelpText is typically used after an InputGroup tooffer additional information about the above inputs. This isjust a simple wrapper around Text with some paddingprovided, and the text color set to light.Platforms: ios, android, web
Composes: Text

Props

inverted bool

InputPicker

InputPicker provides a unified API for Android and iOSpicker rows.On iOS, when the user selects the picker row, the row expands toreveal the children. The value prop that appears alongsidethe right of the picker row will typically be a humanizedversion of the selected value in the picker.On Android, we display the picker as the row itself. Whenselected, the picker prompt will occur. A label isrendered above the picker. The value prop is ignored,since the Android picker already prints the value for us.Platforms: ios, android
Composes: InputTouchable, InputExpandable

Props

onToggleExpansion func (required)
a function called when toggling the visibility of the picker. (iOS only)

editable bool
defaultValue: true

value string
the picker value displayed in the row. (iOS only)

label string (required)
the label for the picker *

expanded bool
controls whether the picker is visible. (iOS only)

backgroundColor string

RowActions

A collection of RowActions to be displayed behinda revealing row.

Props

style any

RowAction

A row action that hide underneath the row, suchas 'Delete', or 'Edit', etc.

Props

RemoveButton

Remove button

InputRow

An Input field with a lot of added functionality. You'd typicallywant to wrap this within an InputGroup.Platforms: ios, android, web
Composes: RevealingRow, InputRowCell, RemoveButton, Input, Base, Text, RowAction, RowActions

Props

label string

autoFocus bool

removable bool
defaultValue: false

placeholder string

vertical bool

onSelectLabel func

onChangeText func (required)

value union(string,node)

backgroundColor string
defaultValue: 'white'

editable bool
defaultValue: true

labelWidth number

verticalHeight number
defaultValue: 80

onRequestRemove func

height number
defaultValue: 50

icon node

inverted bool

condensed bool

multiline bool

InputRowCell

A simple component that is used to wrap various Input Rows.It provides a fixed height, and other default styles.Platforms: ios, android, web
Composes: Base

Props

height number
defaultValue: 50

RevealOption

Input Option

Props

onPress func (required)

backgroundColor string
defaultValue: 'midgray'

label string (required)

textColor string
defaultValue: 'white'

InputRowRevealOptions

Revealable row options container. Typically usedto delete a row.

Props

height number
defaultValue: 40

options array

InputToggle

A row with a label and switch, allowingthe user to toggle a boolean value.Platforms: ios, android
Composes: InputRowCell, Switch

Props

style any

value bool (required)

backgroundColor string
defaultValue: 'transparent'

label string (required)

onValueChange func (required)

editable bool
defaultValue: true

switchProps object

onTintColor string
defaultValue: 'success'

InputTouchable

An InputTouchable is typically used within the context of anInputGroup, when you want the user to select a value from anotherListView, PopupMenu, etc. It's a very simple wrapper aroundTouchableRow, to make it play nicely with other Input components.Platforms: ios, android, web
Composes: TouchableRow, Text

Props

backgroundColor string
defaultValue: 'white'

label union(string,node) (required)

icon node

image object

value union(string,node)

showMore bool
defaultValue: false

condensed bool

onPress func (required)

disabled bool
defaultValue: false

labelColor string
defaultValue: 'default'

inverted bool

RevealingRow

ReavealingRow enables a row to have revealed optionsthat appear, for instance, when editing it.Platforms: ios, android, web
Composes: Base

Props

showingOptions bool (required)
defaultValue: false

revealedContent node (required)

backgroundColor string
defaultValue: 'white'

Text

---

Text

Basic Text Component that provides shorthands for sizing,lineHeight, and fontWeights.

Props

tiny bool

small bool

medium bool

large bool

giant bool

thin bool

thick bool

bold bool

inverted bool

lineHeight number