react-native-reactive-library v1.0.5

React Native Reactive Library

Table of Contents

• Configuration Installation Setup
• Settings Breakpoints The Theme [Colors](#user-content-colors) Defaults [Formats](#user-content-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
	}
]

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.

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

Usage

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

GridX

Accepted props

Usage

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

GridY

Accepted props

Usage

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

Cell

Must be a child of GridX or GridY component

Accepted props

Usage

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

Text

Accepted props

Usage

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

BlockText

Accepted props

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

Usage

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

Button

Accepted props

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

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

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 https://github.com/facebook/react-native/issues/16152). This can lead to component dimensions being out of whack when in this mode.