diff --git a/README.md b/README.md
index ea80f31..346177f 100644
--- a/README.md
+++ b/README.md
@@ -141,7 +141,7 @@ Use reverse to change `row` to `row-reverse` or `column` to `column-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!
diff --git a/Row.js b/Row.js
index 5582044..71b9a40 100644
--- a/Row.js
+++ b/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 (
-
+
{props.children}
);
diff --git a/View.js b/View.js
index c04e429..addd14e 100644
--- a/View.js
+++ b/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 (
-
+
{props.children}
);
diff --git a/package.json b/package.json
index ba5f57d..a8510a1 100644
--- a/package.json
+++ b/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": {
diff --git a/shorthandStyles.js b/shorthandStyles.js
index ad1e107..d9d78a6 100644
--- a/shorthandStyles.js
+++ b/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
}