├── LICENSE ├── README.md ├── View.js ├── docs ├── hcenter vcenter.png ├── hcenter.png ├── hstart.png ├── mdpt_mdpl.png ├── push.png ├── smp.png └── spread.png ├── index.js └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Alexander Vitanov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-view 2 | A lightweight View component that can be styled quickly. 3 | 4 | [![NPM](https://nodei.co/npm/react-native-view.png)](https://www.npmjs.com/package/react-native-view) 5 | 6 | Installation 7 | --- 8 | ```javascript 9 | $ npm install react-native-view --save 10 | ``` 11 | then 12 | ```javascript 13 | import View from 'react-native-view'; 14 | /*...*/ 15 | 16 | /*...*/ 17 | 18 | ``` 19 | # Usage 20 | 21 | ## Align content 22 | 23 | 24 | #### Example 25 | 26 | - ##### center children horizontally 27 | 28 | ```javascript 29 | 30 | /*...*/ 31 | 32 | ``` 33 | ![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/hcenter.png?raw=true "hcenter") 34 | 35 | 36 | - ##### align children to the left 37 | 38 | ```javascript 39 | 40 | /*...*/ 41 | 42 | ``` 43 | ![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/hstart.png?raw=true "hstart") 44 | 45 | 46 | - ##### center children horizontally and vertically 47 | 48 | ```javascript 49 | 50 | /*...*/ 51 | 52 | ``` 53 | ![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/hcenter%20vcenter.png?raw=true "vcenter hcenter") 54 | 55 | ## Available props: 56 | 57 | | prop | description | 58 | | ------ | ------ | 59 | | hstart | Align children to the left | 60 | | hcenter | Center children horizontally | 61 | | hend | Align children to the right | 62 | | vstart | Align children to the top | 63 | | vcenter | Center children vertically | 64 | | vend | Align children to the bottom | 65 | | flex | Apply **flex: 1** | 66 | | row | Becomes a row **(column by default)** | 67 | | stretch | Stretch the view to fill parent | 68 | | spread | Spread children evenly along the orientation **with padding** | 69 | | push | Spread children evenly along the orientation **without padding** | 70 | 71 | ## More examples: 72 | 73 | 74 | - ##### spread 75 | 76 | ```javascript 77 | 78 | /*...*/ 79 | 80 | ``` 81 | ![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/spread.png?raw=true "push") 82 | 83 | 84 | - ##### push 85 | 86 | ```javascript 87 | 88 | /*...*/ 89 | 90 | ``` 91 | ![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/push.png?raw=true "spread") 92 | 93 | 94 | ## Padding 95 | 96 | 97 | By default paddings can be set using breakpoints: 98 | 99 | | name | value in px | 100 | | ------ | ------ | 101 | | sm | 5 | 102 | | md | 15 | 103 | | lg | 30 | 104 | | xl | 45 | 105 | 106 | Also, you can specify where paddings are applied using directional suffixes: **l - left | r - right | t - top | b - bottom**: 107 | 108 | #### Example 109 | 110 | 111 | 112 | - #### 15px padding top and left 113 | 114 | ```javascript 115 | 116 | 117 | ``` 118 | ![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/mdpt_mdpl.png?raw=true "mdpt mdpl") 119 | 120 | 121 | - #### 5px padding on all sides 122 | 123 | ```javascript 124 | 125 | 126 | ``` 127 | ![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/smp.png?raw=true "smp") 128 | 129 | 130 | 131 | License 132 | ---- 133 | 134 | MIT 135 | -------------------------------------------------------------------------------- /View.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View as RNView, 4 | } from 'react-native'; 5 | 6 | 7 | class View extends React.Component { 8 | 9 | getPadding() { 10 | let { p, pl, pr, pt, pb, smp, mdp, lgp, xlp, 11 | smpl, smpr, smpt, smpb, mdpl, mdpr, mdpt, mdpb, lgpl, lgpr, lgpt, lgpb, 12 | xlpr, xlpl, xlpt, xlpb } = this.props 13 | const sm = 5 14 | smp = smp ? sm : null 15 | smpl = smpl ? sm : null 16 | smpr = smpr ? sm : null 17 | smpb = smpb ? sm : null 18 | smpt = smpt ? sm : null 19 | const md = 15 20 | mdp = mdp ? md : null 21 | mdpl = mdpl ? md : null 22 | mdpr = mdpr ? md : null 23 | mdpb = mdpb ? md : null 24 | mdpt = mdpt ? md : null 25 | const lg = 30 26 | lgp = lgp ? lg : null 27 | lgpl = lgpl ? lg : null 28 | lgpr = lgpr ? lg : null 29 | lgpb = lgpb ? lg : null 30 | lgpt = lgpt ? lg : null 31 | const xl = 45 32 | xlp = xlp ? xl : null 33 | xlpl = xlpl ? xl : null 34 | xlpr = xlpr ? xl : null 35 | xlpb = xlpb ? xl : null 36 | xlpt = xlpt ? xl : null 37 | const padding = smp || mdp || lgp || xlp || p 38 | return { 39 | padding, 40 | paddingTop: pt || smpt || mdpt || lgpt || xlpt || padding, 41 | paddingBottom: pb || smpb || mdpb || lgpb || xlpb || padding, 42 | paddingLeft: pl || smpl || mdpl || lgpl || xlpl || padding, 43 | paddingRight: pr || smpr || mdpr || lgpr || xlpr || padding 44 | } 45 | } 46 | 47 | getItemsAlignment() { 48 | const { row, vstart, vcenter, hcenter, vend, hstart, stretch, hend, spread, push, flex } = this.props 49 | let style = { flexDirection: row ? 'row' : "column" } 50 | 51 | if (flex) { 52 | style['flex'] = 1 53 | } 54 | 55 | const vprop = row ? 'alignItems' : "justifyContent" 56 | if (vcenter) { 57 | style[vprop] = "center" 58 | } 59 | if (vstart) { 60 | style[vprop] = "flex-start" 61 | } 62 | if (vend) { 63 | style[vprop] = "flex-end" 64 | } 65 | 66 | const hprop = row ? "justifyContent" : 'alignItems' 67 | if (hcenter) { 68 | style[hprop] = "center" 69 | } 70 | if (hstart) { 71 | style[hprop] = "flex-start" 72 | } 73 | if (hend) { 74 | style[hprop] = "flex-end" 75 | } 76 | if (spread) { 77 | style['justifyContent'] = "space-around" 78 | } 79 | if (push) { 80 | style['justifyContent'] = "space-between" 81 | } 82 | if (stretch) { 83 | style['alignItems'] = "stretch" 84 | } 85 | return style 86 | } 87 | 88 | getDimensions() { 89 | const { w, h } = this.props 90 | let style = {} 91 | 92 | if (w) { 93 | style['width'] = w 94 | } 95 | if (h) { 96 | style['height'] = h 97 | } 98 | return style 99 | } 100 | 101 | getBorderStyle() { 102 | const { border } = this.props 103 | let style = {} 104 | if (border) { 105 | var borderColor = border.color || "#000" 106 | style = { 107 | borderColor, 108 | borderWidth: border.width, 109 | borderTopWidth: border.top || border.width, 110 | borderBottomWidth: border.bottom || border.width, 111 | borderLeftWidth: border.left || border.width, 112 | borderRightWidth: border.right || border.width 113 | } 114 | } 115 | return style 116 | } 117 | 118 | render() { 119 | const { bg } = this.props 120 | return ( 121 | 128 | {this.props.children} 129 | 130 | ); 131 | } 132 | }; 133 | 134 | export default View -------------------------------------------------------------------------------- /docs/hcenter vcenter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i6mi6/react-native-view/677bebe28fdfdddbd59e7b1ac02411c45855b5f3/docs/hcenter vcenter.png -------------------------------------------------------------------------------- /docs/hcenter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i6mi6/react-native-view/677bebe28fdfdddbd59e7b1ac02411c45855b5f3/docs/hcenter.png -------------------------------------------------------------------------------- /docs/hstart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i6mi6/react-native-view/677bebe28fdfdddbd59e7b1ac02411c45855b5f3/docs/hstart.png -------------------------------------------------------------------------------- /docs/mdpt_mdpl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i6mi6/react-native-view/677bebe28fdfdddbd59e7b1ac02411c45855b5f3/docs/mdpt_mdpl.png -------------------------------------------------------------------------------- /docs/push.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i6mi6/react-native-view/677bebe28fdfdddbd59e7b1ac02411c45855b5f3/docs/push.png -------------------------------------------------------------------------------- /docs/smp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i6mi6/react-native-view/677bebe28fdfdddbd59e7b1ac02411c45855b5f3/docs/smp.png -------------------------------------------------------------------------------- /docs/spread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i6mi6/react-native-view/677bebe28fdfdddbd59e7b1ac02411c45855b5f3/docs/spread.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import View from './View' 2 | export default View -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-view", 3 | "version": "1.0.0", 4 | "description": "A lightweight View component for React Native", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/i6mi6/react-native-view.git" 12 | }, 13 | "keywords": [ 14 | "react-native", 15 | "android", 16 | "ios" 17 | ], 18 | "author": "Alexander Vitanov (https://github.com/i6mi6)", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/i6mi6/react-native-view/issues" 22 | }, 23 | "homepage": "https://github.com/i6mi6/react-native-view#readme" 24 | } 25 | --------------------------------------------------------------------------------