React Native Reactive Library
Table of Contents
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// react-native-reactive-library can now be imported
Settings
Setting Settings
You can configure your settings by passing settings through the following functions.
setsetsetsetset
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 =></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' defaultspadding = defaultsmargin
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'... { <Button ="Primary Button" ="primary"/>}...
Component
import Reactive from 'react-native-reactive-library'const Primary: PrimaryBtn = ReactivecomponentsButton... { <PrimaryBtn ="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 = ReactiveStyleSheet
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: 05 condition: 'width' otherClassName: width: 50 height: 100 scalable: true const styleSheet = ReactiveStyleSheet
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 = ReactiveStyleSheet
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' { return <Wrapper> <GridY => <Cell ="auto" => <Text>This will stretch to fill the remaining height of the parent</Text> <GridX ="all"> <Cell = => <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 = => <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 ="auto" => <Text>This fills the remainder of the screens width</Text> </Cell> </GridX> </Cell> <Cell ="shrink" => <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 = > ...</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 ="center" ...> <Cell ="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 ="center" ...> <Cell ="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 ="center" ...> <Cell ="shrink">Content</Cell> <Cell ="6">Content</Cell> <Cell ="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 ="1.4em" ="bold" = ...> 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 ="secondary" ="1.4em" ="bold" = ...> 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 ="mailto:johnsmith@example.com" ="1.4em" ="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 = ="primary" ="large" = .../>
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 ="An accordion" ="^" ="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 ="primary"> <Accordion ="An accordion" =">" /> <Accordion ="Another accordion" =">" /> ...</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.