Update Helpers.js : enable space between in scrollview component (#69)

* enable space between in scrollview component
* update helpers scrollspace around and space between, update metrics

Author: thozh

App/Theme/Helpers.js

@@ -1,134 +1,162 @@
 import { StyleSheet } from 'react-native'
+import { Colors } from 'App/Theme'
 
 export default StyleSheet.create({
-  fill: {
-    flex: 1,
+  backgroundReset: {
+    backgroundColor: Colors.transparent,
   },
   center: {
     alignItems: 'center',
     justifyContent: 'center',
   },
-  fillCenter: {
-    flex: 1,
+  colCenter: {
     alignItems: 'center',
+    flexDirection: 'column',
     justifyContent: 'center',
   },
-  row: {
-    flexDirection: 'row',
+  colCross: {
+    alignItems: 'center',
+    flexDirection: 'column',
   },
-  rowReverse: {
-    flexDirection: 'row-reverse',
+  colMain: {
+    flexDirection: 'column',
+    justifyContent: 'center',
   },
   column: {
     flexDirection: 'column',
   },
   columnReverse: {
     flexDirection: 'column-reverse',
   },
-  mainStart: {
-    justifyContent: 'flex-start',
-  },
-  mainCenter: {
-    justifyContent: 'center',
-  },
-  mainEnd: {
-    justifyContent: 'flex-end',
-  },
-  mainSpaceBetween: {
-    justifyContent: 'space-between',
-  },
-  mainSpaceAround: {
-    justifyContent: 'space-around',
-  },
-  crossStart: {
-    alignItems: 'flex-start',
-  },
   crossCenter: {
     alignItems: 'center',
   },
   crossEnd: {
     alignItems: 'flex-end',
   },
+  crossStart: {
+    alignItems: 'flex-start',
+  },
   crossStretch: {
     alignItems: 'stretch',
   },
-  selfStretch: {
-    alignSelf: 'stretch',
+  fill: {
+    flex: 1,
   },
-  rowMain: {
-    flexDirection: 'row',
+  fillCenter: {
+    alignItems: 'center',
+    flex: 1,
     justifyContent: 'center',
   },
-  rowCross: {
-    flexDirection: 'row',
-    alignItems: 'center',
+  fillCol: {
+    flex: 1,
+    flexDirection: 'column',
   },
-  rowCenter: {
-    flexDirection: 'row',
+  fillColCenter: {
     alignItems: 'center',
-    justifyContent: 'center',
-  },
-  colMain: {
+    flex: 1,
     flexDirection: 'column',
     justifyContent: 'center',
   },
-  colCross: {
-    flexDirection: 'column',
+  fillColCross: {
     alignItems: 'center',
+    flex: 1,
+    flexDirection: 'column',
   },
-  colCenter: {
+  fillColMain: {
+    flex: 1,
     flexDirection: 'column',
-    alignItems: 'center',
     justifyContent: 'center',
   },
-  fillRow: {
+  fillColReverse: {
     flex: 1,
-    flexDirection: 'row',
+    flexDirection: 'column-reverse',
   },
-  fillRowReverse: {
+  fillRow: {
     flex: 1,
-    flexDirection: 'row-reverse',
+    flexDirection: 'row',
   },
-  fillRowMain: {
+  fillRowCenter: {
+    alignItems: 'center',
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
   },
   fillRowCross: {
+    alignItems: 'center',
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center',
   },
-  fillRowCenter: {
+  fillRowMain: {
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'center',
   },
-  fillCol: {
+  fillRowReverse: {
     flex: 1,
-    flexDirection: 'column',
+    flexDirection: 'row-reverse',
   },
-  fillColReverse: {
-    flex: 1,
-    flexDirection: 'column-reverse',
+  fullSize: {
+    height: '100%',
+    width: '100%',
   },
-  fillColMain: {
-    flex: 1,
-    flexDirection: 'column',
+  fullWidth: {
+    width: '100%',
+  },
+  mainCenter: {
     justifyContent: 'center',
   },
-  fillColCross: {
-    flex: 1,
-    flexDirection: 'column',
+  mainEnd: {
+    justifyContent: 'flex-end',
+  },
+  mainSpaceAround: {
+    justifyContent: 'space-around',
+  },
+  mainSpaceBetween: {
+    justifyContent: 'space-between',
+  },
+  mainStart: {
+    justifyContent: 'flex-start',
+  },
+  mirror: {
+    transform: [{ scaleX: -1 }],
+  },
+  rotate90: {
+    transform: [{ rotate: '90deg' }],
+  },
+  rotate90Inverse: {
+    transform: [{ rotate: '-90deg' }],
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  rowCenter: {
     alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
   },
-  fillColCenter: {
-    flex: 1,
-    flexDirection: 'column',
+  rowCross: {
     alignItems: 'center',
+    flexDirection: 'row',
+  },
+  rowMain: {
+    flexDirection: 'row',
     justifyContent: 'center',
   },
+  rowReverse: {
+    flexDirection: 'row-reverse',
+  },
+  scrollSpaceAround: {
+    flexGrow: 1,
+    justifyContent: 'space-around',
+  },
+  scrollSpaceBetween: {
+    flexGrow: 1,
+    justifyContent: 'space-between',
+  },
+  selfStretch: {
+    alignSelf: 'stretch',
+  },
   textCenter: {
     textAlign: 'center',
   },
@@ -141,10 +169,4 @@ export default StyleSheet.create({
   textRight: {
     textAlign: 'right',
   },
-  backgroundReset: {
-    backgroundColor: 'transparent',
-  },
-  fullWidth: {
-    width: '100%',
-  },
 })

App/Theme/Metrics.js

@@ -2,9 +2,69 @@
  * This file contains metric values that are global to the application.
  */
 
+// Examples of metrics you can define:
+export const tiny = 5
+export const small = tiny * 2 // 10
+export const normal = tiny * 3 // 15
+export const medium = normal * 2 // 30
+
 export default {
-  // Examples of metrics you can define:
-  // baseMargin: 10,
-  // largeMargin: 20,
-  // smallMargin: 5,
+  bottomMargin: {
+    marginBottom: normal,
+  },
+  mediumBottomMargin: {
+    marginBottom: medium,
+  },
+
+  tinyVerticalMargin: {
+    marginVertical: tiny,
+  },
+  smallVerticalMargin: {
+    marginVertical: small,
+  },
+  verticalMargin: {
+    marginVertical: normal,
+  },
+  mediumVerticalMargin: {
+    marginVertical: medium,
+  },
+
+  tinyHorizontalMargin: {
+    marginHorizontal: tiny,
+  },
+  smallHorizontalMargin: {
+    marginHorizontal: small,
+  },
+  horizontalMargin: {
+    marginHorizontal: normal,
+  },
+  mediumHorizontalMargin: {
+    marginHorizontal: medium,
+  },
+
+  tinyHorizontalPadding: {
+    paddingHorizontal: tiny,
+  },
+  smallHorizontalPadding: {
+    paddingHorizontal: small,
+  },
+  horizontalPadding: {
+    paddingHorizontal: normal,
+  },
+  mediumHorizontalPadding: {
+    paddingHorizontal: medium,
+  },
+
+  tinyVerticalPadding: {
+    paddingVertical: tiny,
+  },
+  smallVerticalPadding: {
+    paddingVertical: small,
+  },
+  verticalPadding: {
+    paddingVertical: normal,
+  },
+  mediumVerticalPadding: {
+    paddingVertical: medium,
+  },
 }