React Native Reactive Library

Table of Contents

• Configuration
  • Installation
  • Setup
• Settings
  • Breakpoints
  • The Theme
    • Colors
    • Defaults
    • Formats
  • The Stylesheet
  • The Grid
• Components
  • Container
  • GridX
  • GridY
  • Cell
  • Text
  • BlockText
  • Link
  • Button
  • Accordion
  • AccordionGroup

Configuration

Installation

npm install --save react-native-reactive-library yarn add react-native-reactive-library

Setup

You will find a new file, settings.js in your project root. This is where all Reactive settings are stored, which are entirely customizable. You can move this to any location in your project. Be sure to import the file into your project in your primary controller. It must be imported before React Native Reactive Library can be imported.

// import settings.js before react-native-reactive-library
import './settings'
// react-native-reactive-library can now be imported
import Reactive from 'react-native-reactive-library'

Settings

Setting Settings

You can configure your settings by passing settings through the following functions.

set.breakpoints(breakpoints)
set.defaults(defaults)
set.formats(formats)
set.colors(colors)
set.styles(styles)

Ensure that you set breakpoints before any other settings, as they rely on the breakpoints.

Breakpoints

Breakpoints allow you to customize styles by the size of the device. If multiple breakpoints apply, the first in the list will take precedence over the later. Currently the only condition available for breakpoints is the device width, but more are expected to be added shortly (i.e. height, ratio, etc). They are easily customizable.

Basic

const breakpoints = [
  {
		name: 'small',
		minWidth: 320
	},
	{
		name: 'medium',
		minWidth: 720
	},
	{
		name: 'large',
		minWidth: 1024
	}
]

Property	Type	Description	Accepted Arguments
name	string	Name of breakpoint to for reference	any string
aspectRatio	string	Device aspect ratio required for a match	'integer:integer' for absolute aspectRatio, '[integer:integer]' for reversible aspect ratio
orientation	string	Device orientation required for a match	landscape, portrait
minWidth	float	Minimum allowed device width for a match	float > 0
maxWidth	float	Maximum allowed device width for a match	float > 0
minHeight	float	Minimum allowed device height for a match	float > 0
maxHeight	float	Maximum allowed device height for a match	float > 0

Advanced

const breakpoints = [
	{
		name: 'smallPortrait',
		minWidth: 320,
		maxWidth: 720,
		landscape: 'portrait'
	},
	{
		name: 'iPadPro',
		minWidth: 834,
		minHeight: 834,
		aspectRatio: '[3:4]'
	},
	{
		name: 'iPhoneXLandscape',
		minHeight: 834,
		maxHeight: 834,
		orientation: 'portrait'
	}
]

The Theme

Colors

You can define any number of theme colors to be used throughout the project. They can be used either in component props, or imported into project files and used in a stylesheet or inline styles

Definition

const colors = {
  primary: '#00246D',
  secondary: '#00A651',
  warning: 'orange',
  info: '#2864DC',
  success: '#096737',
  black: 'black',
  lightGray: '#CCC8C7',
  gray: '#9f9f9f',
  darkGray: '#4D4D4D',
  white: '#ffffff',
}

Usage

import Reactive from 'react-native-reactive-library'
const {colors} = Reactive
<Text style={{color: colors.primary}}></Text>

Defaults

The defaults allow you to define global defaults to be used throughout components including margin, rounding and font families. Stylesheet rules apply to this as well

const defaults = {
	gridSize: 12,
	margin: {
		small: 15,
		medium: 18,
		large: 21
	},
	rounding: {
		small: 10,
		medium: 12,
		large: 14
	},
	fontFamily: {
		body: 'Open Sans',
		header: 'Open Sans'
	}
}

defaults.padding = defaults.margin

Formats

You can define formats to simplify components, and create custom components. Props and styles put under defaults will be used by the base component, and inherited by all other formats

let formats = {
	// component name (in camelCase)
	button: {
		defaults: {
			width: 'full',
			backgroundColor: 'white',
			fontFamily: 'body',
			color: 'black',
			borderColor: 'darkGray',
			style: {
				borderBottomWidth: 4
			}
		},
		primary: {
			color: 'white',
			backgroundColor: 'primary'
		}
	}
}

You can use formats in two ways.

Format Property

import {Button} from 'react-native-reactive-library'
...
render () {
	<Button title="Primary Button" format="primary"/>
}
...

Component

import Reactive from 'react-native-reactive-library'
const {Primary: PrimaryBtn} = Reactive.components.Button
...
render () {
	<PrimaryBtn title="Primary Button"/>
}
...

Styles

The styles predefined in the settings.js file should not be deleted. They can be altered, but adding new "styles" will have no effect.

The Stylesheet

You can create your own custom stylesheets with responsive styles using Reactive.StyleSheet.create.

Option 1 - Breakpoints

Styles can be altered based on current breakpoint.

const style = {
	className: {
		// breakpoints
		small: {
			height: 100,
			width: 100,
			backgroundColor: 'red'
		},
		medium: {
			height: 120,
			width: 160,
			backgroundColor: 'blue'
		},
		large: {
			height: 150,
			width: 200,
		}
	}
}

const styleSheet = Reactive.StyleSheet.create(style)

Option 2 - Scaling

You can also scale numerical attributes using the scalable attribute.

Property	Type	Default	Description
include	array	null	Array of properties to be scaled, invalid properties will be ignored. If null, all valid props are scaled
exclude	array	null	Array of properties to NOT be scaled. If null, no props will be ignored
multiplier	float	1	Amount to multiply the scale
condition	string	'width'	Unit that the scale is based off

For example, if the condition is 'width', and the base width is 320, the current width is 960, with multiplier of 0.5, it will scale to (960/320 - 1) x 0.5 + 1 = 2 x 0.5 + 1 = 2

const style = {
	className: {
		width: 50,
		height: 100,
		scalable: {
			include: ['width'],
			multiplier: 0.5,
			condition: 'width'
		}
	},
	otherClassName: {
		width: 50,
		height: 100,
		scalable: true
	}
}

const styleSheet = Reactive.StyleSheet.create(style)

Combination

You can also combine breakpoints and scaling. In the following example, the scaling will begin when the screen breakpoint is medium or greater.

const style = {
	otherClassName: {
		small: {
			width: 50
		},
		medium: {
			width: 50,
			scalable: true
		}
	}
}

const styleSheet = Reactive.StyleSheet.create(style)

The Grid

The grid utilizes the breakpoints and grid size. The following working example assumes defaults.gridSize = 12

import React, { Component } from 'react'
import { Text } from 'react-native'

import './settings';

import Reactive, { GridY, GridX, Cell } from 'react-native-reactive-library'

export default class App extends Component {
  render() {
    return (
      <Wrapper>
        <GridY style={{height: '100%', width: '100%'}}>
          <Cell size="auto" style={{backgroundColor:'orange'}}>
            <Text>This will stretch to fill the remaining height of the parent</Text>
            <GridX padding="all">
              <Cell size={{small: 6, medium: 3}} style={{backgroundColor:'pink'}}>
                <Text>
                  This fills 1/2th of the width on a small screen
                  and fills 1/4th of the width on a medium screen
                </Text>
              </Cell>
              <Cell size={{small: 6, medium: 3}} style={{backgroundColor:'purple'}}>
                <Text>
                  This fills 1/2th of the width on a small screen
                  and fills 1/4th of the width on a medium screen
                </Text>
              </Cell>
              <Cell size="auto" style={{backgroundColor:'red'}}>
                <Text>This fills the remainder of the screens width</Text>
              </Cell>
            </GridX>
          </Cell>
          <Cell size="shrink" style={{backgroundColor:'yellow'}}>
            <Text>This Cell is shrunk to fit the content</Text>
          </Cell>
        </GridY>
      </Wrapper>
    )
  }
}

Components

All accepted props can utilize the breakpoint structure from stylesheets

Container

Accepted props

Property	Type	Description	Accepted Arguments
hAlign	string	Horizontal content alignment	left, right, center, baseline, stretch
vAlign	string	Vertical content alignment	top, bottom, middle, justify, distribute
margin	string	Container margin	x, y, left, top, right, bottom, all
padding	string	Container padding	x, y, left, top, right, bottom, all
size	string	Container width	User defined size
fitParent	boolean	Have container fill parent	true/false
inherit	boolean	Ignore default format	true/false
format	string	Component formats	User defined format
style	object	Component styles	Generic text component styles

Usage

<Container padding={{small: "all", large: "x"}} fitParent>
	...
</Container>

GridX

Accepted props

Property	Type	Description	Accepted Arguments
hAlign	string	Horizontal cell alignment	left, right, center, baseline, stretch
vAlign	string	Vertical cell alignment	top, bottom, middle, justify, distribute
margin	string	Child cell margin	x, y, left, top, right, bottom, all
padding	string	Child cell padding	x, y, left, top, right, bottom, all
inherit	boolean	Ignore default format	true/false
format	string	Component formats	User defined format
style	object	Component styles	Generic text component styles

Usage

<GridX hAlign="center" ...>
	<Cell size="6">Content</Cell>
</GridX>

GridY

Accepted props

Property	Type	Description	Accepted Arguments
hAlign	string	Horizontal cell alignment	left, right, center, baseline, stretch
vAlign	string	Vertical cell alignment	top, bottom, middle, justify, distribute
margin	string	Child cell margin	x, y, left, top, right, bottom, all
padding	string	Child cell padding	x, y, left, top, right, bottom, all
inherit	boolean	Ignore default format	true/false
format	string	Component formats	User defined format
style	object	Component styles	Generic text component styles

Usage

<GridY hAlign="center" ...>
	<Cell size="6">Content</Cell>
</GridY>

Cell

Must be a child of GridX or GridY component

Accepted props

Property	Type	Description	Accepted Arguments
align	string	Cell alignment (Overrides grid)	left, right, center, stretch, baseline, auto
margin	string	Cell margin (Overrides grid)	x, y, left, top, right, bottom, all
padding	string	Cell padding (Overrides grid)	x, y, left, top, right, bottom, all
size	string/integer	Cell width or height relative to grid	integer <= grid size or shrink, auto
inherit	boolean	Ignore default format	true/false
format	string	Component formats	User defined format
style	object	Component styles	Generic text component styles

Usage

<GridX hAlign="center" ...>
	<Cell size="shrink">Content</Cell>
	<Cell size="6">Content</Cell>
	<Cell size="auto">Content</Cell>
</GridX>

Text

Accepted props

Property	Type	Description	Accepted Arguments
color	string	Text color	string - Valid color
weight	string	Font weight	thin, extralight, light, regular, semiBold, bold, extraBold, black
align	string	Text align	left, right, center, justify
fontFamily	string	Text font family	string - Valid font family
size	string	Font size	User defined size
spacing	string	Margin between components	large, medium, small, none
lineHeight	string/float	Text line height	float or float followed by 'em' e.g. '1.4em'
inherit	boolean	Ignore default format	true/false
format	string	Component formats	user defined formats
style	object	Component styles	generic text component styles

Usage

<Text lineHeight="1.4em" weight="bold" spacing={{small: 'none', medium: 'small'}} ...>
	This is miscellaneous text
</Text>

BlockText

Accepted props

Property	Type	Description	Accepted Arguments
color	string	Text color	string - Valid color
weight	string	Font weight	thin, extralight, light, regular, semiBold, bold, extraBold, black
align	string	Text align	left, right, center, justify
fontFamily	string	Text font family	string - Valid font family
size	string	Block and Font size	User defined size
spacing	string	Margin between components	large, medium, small, none
lineHeight	string/float	Text line height	float or float followed by 'em' e.g. '1.4em'
style	object	Component styles	generic text component styles
width	string	Block width	width, auto
padding	string	Block padding	x, y, left, right, top, bottom, all
borderColor	string	Block border color	string - Valid color
borderWidth	float	Block border width	float
backgroundColor	string	Block background color	string - Valid color
rounding	string	Button rounding	large, medium, small, none
inherit	boolean	Ignore default format	true/false
format	string	Component formats	user defined formats

Usage

<BlockText backgroundColor="secondary" lineHeight="1.4em" weight="bold" spacing={{small: 'none', medium: 'small'}} ...>
	This is miscellaneous text
</BlockText>

Link

Link inherits default text format

Accepted props

Property	Type	Description	Accepted Arguments
url	string	Link URL	string - A valid url
color	string	Text color	string - Valid color
weight	string	Font weight	thin, extraLight, light, regular, semiBold, bold, extraBold, black
align	string	Text align	left, right, center, justify
fontFamily	string	Text font family	string - Valid font family
size	string	Font size	User defined size
spacing	string	Margin between components	large, medium, small, none
lineHeight	string/float	Text line height	float or float followed by 'em' e.g. '1.4em'
inherit	boolean	Ignore default format	true/false
format	string	Component formats	User defined format
style	object	Component styles	Generic text component styles

Usage

<Link url="mailto:johnsmith@example.com" lineHeight="1.4em" color="secondary" ...>
	This is miscellaneous text
</Link>

Button

Accepted props

Property	Type	Description	Accepted Arguments
title	string/component	Button title	Any string or React Native Component
color	string	Text color	string - Valid color
weight	string	Font weight	thin, extralight, light, regular, semiBold, bold, extraBold, black
align	string	Text align	left, right, center, justify
fontFamily	string	Text font family	string - Valid font family
backgroundColor	string	Button background color	string - Valid color
width	string	Button width	width, auto
padding	string	Button padding	x, y, left, right, top, bottom, all
rounding	string	Button rounding	large, medium, small, none
size	string	Button and font size	User defined size
spacing	string	Margin between components	large, medium, small, none
borderColor	string	Button border color	string - Valid color
borderWidth	float	Button border width	float
inherit	boolean	Ignore default format	true/false
format	string	Button formats	user defined formats
style	object	Button styles	generic flex component styles

Usage

<Button
	title={<Text>This is miscellaneous text</Text>}
	format="primary" size="large" spacing={{small: 'none', medium: 'small'}} .../>

Accordion

NOTE: Accordion is still in BETA

Must be a child of AccordionGroup component

Accepted props

Property	Type	Description	Accepted Arguments
label	string/component	Accordion label	Any string or React Native Component
icon	string/component	Rotating Accordion icon	Any string or React Native Component
color	string	Text color	string - Valid color
weight	string	Font weight	thin, extralight, light, regular, semiBold, bold, extraBold, black
align	string	Text align	left, right, center, justify
fontFamily	string	Text font family	string - Valid font family
lineHeight	string/float	Text line height	float or float followed by 'em' e.g. '1.4em'
backgroundColor	string	Accordion background color	string - Valid color
width	string	Accordion width	width, auto
padding	string	Accordion padding	x, y, left, right, top, bottom, all
rounding	string	Accordion rounding	large, medium, small, none
size	string	Accordion and font size	User defined size
spacing	string	Margin between components	large, medium, small, none
borderColor	string	Accordion border color	string - Valid color
borderWidth	float	Accordion border width	float
inherit	boolean	Ignore default format	true/false
format	string	Accordion formats	user defined formats
style	object	Accordion styles	generic flex component styles

Usage

<AccordionGroup>
	<Accordion title="An accordion" icon="^" format="primary"/>
</AccordionGroup>

AccordionGroup

The following props are passed to child accordions: format, color, weight, align, fontFamily, lineHeight, backgroundColor, width, padding, spacing, rounding, size, borderColor, borderWidth

Accepted props

Property	Type	Description	Accepted Arguments
allowMultiExpand	boolean	Allows multiple accordions to expand at once	true/false
allowAllClosed	boolean	Allows all accordions to be closed	true/false

Usage

<AccordionGroup allowAllClosed format="primary">
	<Accordion title="An accordion" icon=">" />
	<Accordion title="Another accordion" icon=">" />
	...
</AccordionGroup>

MORE COMPONENT DOCS TO COME!

• List/ListItem

Known Issues

iOS's split view does not currently return correct dimensions, it returns the entire width of the device regardless of the size of the splitview (see facebook/react-native#16152). This can lead to component dimensions being out of whack when in this mode.