https://github.com/kyle-ssg/react-native-common-elements
Common components for react native
https://github.com/kyle-ssg/react-native-common-elements
boilerplate component react-native
Last synced: over 1 year ago
JSON representation
Common components for react native
- Host: GitHub
- URL: https://github.com/kyle-ssg/react-native-common-elements
- Owner: kyle-ssg
- Created: 2017-01-02T17:22:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-30T12:44:14.000Z (over 8 years ago)
- Last Synced: 2024-04-28T05:46:00.064Z (about 2 years ago)
- Topics: boilerplate, component, react-native
- Language: JavaScript
- Size: 4.2 MB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-common-elements
###### Having developed and published a large number of react-native applications and boilerplate code, of all the things I can't live without is this set of customisable layout components.
## Usage
- ```npm i react-native-common-elements --save```
- ```import { init, em, Row, FormGroup, Flex, Container, Column, Text, Bold, H1, H2, H3, H4, H5, H6, globalise } from 'react-native-common-elements';```
## Components
- ```
...``` - text ranging from 1em to 2.5 em
- `````` - text with standardised font size and styles
- `````` - same as text but bold
- `````` - container with standardised guttering
- `````` - Horizontal view with options to space apart and negate container gutter padding
- `````` - view with flex, can override value with ``` value={x}```
- `````` columns within a row element, uses standard guttering
## Util
- ```em(value, baseValue)``` returns unit based on device width
- ```globalise()``` assigns components and em to global scope
# Customisation
Optionally you can override any style property or style variables by calling init, these are deeply merged when rendering
**see styles.js and styleVariables.js for full list of properties**
```
init({text:{color:'red'},h1:{color:'blue'}},{fontSize:16});
```
## Example
```
Text
Text2
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Header 6
1/3
2/3
```