Feature/position

README.md

@@ -141,7 +141,7 @@ Use reverse to change `row` to `row-reverse` or `column` to `column-reverse`:
     <Row reverse />
     <View reverse />
 
-### Margin and Padding shorthand
+### Margin, Padding, and Position shorthand
 
 Extra benefits are gained by using react-native-view instead of the core `View` in that you can use shorthands for `margin` and `padding` styles that are based on the css shorthand convention
 
@@ -172,6 +172,18 @@ Shorthand   | Style Result
 `padding={[20,15,10]}` | `{paddingTop: 20, paddingHorizontal: 15, paddingBottom: 10}`
 `padding={[20,15,10,5]}` | `{paddingTop: 20, paddingRight: 15, paddingBottom: 10, paddingLeft: 5}`
 
+#### pos
+
+Shorthand   | Style Result 
+------------ | -------------
+`pos={0}` | `{position: "absolute", top:0, left: 0, bottom: 0, right: 0}`
+`pos={[0]}` | `{position: "absolute", top:0}`
+`pos={[10,10]}` | `{position: "absolute", top:10, left:10}`
+`pos={[0,1,0]}` | `{position: "absolute", top:0, left:1, bottom:0}`
+`pos={[null,null,0,0]}` | `{position: "absolute", top:null, left:null, bottom:0, right:0}`
+
+
+
 
 
 Contributions and issues very much welcome!

Row.js

@@ -6,21 +6,20 @@ const Row = (props) => {
 
     const {
         dial = 0,
-        flex: _flex,
         spaceBetween,
         spaceAround,
         stretch,
         margin,
         padding,
         style,
+        pos,
         reverse,
         ...otherProps,
     } = props;
 
     const _dial = dial > 0 && dial < 10 ? dial : 0;
-    const flex = typeof(_flex) === "number" ? _flex : !_flex ? null : 1
 
-    const _shorthandStyles = shorthandStyles(margin, padding)
+    const _shorthandStyles = shorthandStyles(margin, padding, pos)
 
     const justifyContent = spaceBetween ? 'space-between' : spaceAround ? 'space-around' : _dial === 0 ? null : _dial % 3 === 0 ? 'flex-end' :
             _dial % 3 === 2 ? 'center' : 'flex-start';
@@ -30,8 +29,17 @@ const Row = (props) => {
 
     const flexDirection = reverse ? 'row-reverse' : 'row';
 
+    const position = typeof pos === 'number' || Array.isArray(pos) ? 'absolute' : null
+
+    const _style = {
+        flexDirection,
+        justifyContent,
+        alignItems,
+        position,
+    };
+
     return (
-        <View style={[{flexDirection, justifyContent, alignItems, flex}, _shorthandStyles, style]} {...otherProps} >
+        <View style={[_style, _shorthandStyles, style]} {...otherProps} >
             {props.children}
         </View>
     );

View.js

@@ -7,21 +7,20 @@ const View = (props) => {
 
     const {
         dial = 0,
-        flex: _flex,
         style,
         spaceBetween,
         spaceAround,
         stretch,
         margin,
         padding,
+        pos,
         reverse,
         ...otherProps,
     } = props;
 
     const _dial = dial > 0 && dial < 10 ? dial : 0;
-    const flex = typeof(_flex) === "number" ? _flex : !_flex ? null : 1
 
-    const _shorthandStyles = shorthandStyles(margin, padding)
+    const _shorthandStyles = shorthandStyles(margin, padding, pos)
 
     const justifyContent = spaceBetween ? 'space-between' : spaceAround ? 'space-around' : _dial === 0 ? null : _dial > 6 ? 'flex-end' :
             _dial > 3 ? 'center' : 'flex-start';
@@ -31,8 +30,17 @@ const View = (props) => {
 
     const flexDirection = reverse ? 'column-reverse' : 'column';
 
+    const position = typeof pos === 'number' || Array.isArray(pos) ? 'absolute' : null
+
+    const _style = {
+        flexDirection,
+        justifyContent,
+        alignItems,
+        position,
+    }
+
     return (
-        <RNView style={[{flexDirection, justifyContent, alignItems, flex}, _shorthandStyles, style]} {...otherProps} >
+        <RNView style={[_style, _shorthandStyles, style]} {...otherProps} >
             {props.children}
         </RNView>
     );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-row",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A wrapper around the react-native View component enabling concise assignment of flexbox properties",
   "main": "index.js",
   "scripts": {

shorthandStyles.js

@@ -1,4 +1,4 @@
-const shorthandStyles = (margin, padding) => {
+const shorthandStyles = (margin, padding, position) => {
 
     let s = {}
 
@@ -41,7 +41,32 @@ const shorthandStyles = (margin, padding) => {
                 s['paddingLeft'] = padding[3]
         }
     }
-
+
+    if (typeof position === "number") {
+        s['top'] = position
+        s['left'] = position
+        s['bottom'] = position
+        s['right'] = position
+    }
+    else if (Array.isArray(position)){
+        switch (position.length) {
+            case 1:
+                s['top'] = position[0]
+            case 2:
+                s['top'] = position[0]
+                s['left'] = position[1]
+            case 3:
+                s['top'] = position[0]
+                s['left'] = position[1]
+                s['bottom'] = position[2]
+            case 4:
+                s['top'] = position[0]
+                s['left'] = position[1]
+                s['bottom'] = position[2]
+                s['right'] = position[3]
+        }
+    }
+
     return s
 }