Refactor dimension handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/styles.tsx

@@ -1,24 +1,8 @@
-import { StyleSheet, Dimensions } from 'react-native';
-
-const { width, height } = Dimensions.get('window');
-
-const guidelineBaseWidth = 350;
-const guidelineBaseHeight = 680;
-
-const horizontalScale = (size: number) => (width / guidelineBaseWidth) * size;
-const verticalScale = (size: number) => (height / guidelineBaseHeight) * size;
-const moderateScale = (size: number, factor = 0.5) =>
-  size + (horizontalScale(size) - size) * factor;
+import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-  marginBottom: {
-    marginBottom: verticalScale(15),
-  },
-  bigMarginBottom: {
-    marginBottom: verticalScale(30),
-  },
-  extremeMarginBottom: {
-    marginBottom: verticalScale(100),
+  smallPadding: {
+    padding: '2.5%',
   },
   padding: {
     padding: '5%',
@@ -27,19 +11,24 @@ const styles = StyleSheet.create({
     paddingHorizontal: '2.5%',
   },
   centered: {
-    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
   centeredVertical: {
     alignItems: 'center',
   },
+  centeredHorizontal: {
+    justifyContent: 'center',
+  },
   centerText: {
     textAlign: 'center',
   },
   flex: {
     flex: 1,
   },
+  flexGrow: {
+    flexGrow: 1,
+  },
   flexRow: {
     flexDirection: 'row',
   },
@@ -57,6 +46,12 @@ const styles = StyleSheet.create({
   flexRowReverse: {
     flexDirection: 'row-reverse',
   },
+  justifyStart: {
+    justifyContent: 'flex-start',
+  },
+  justifyEnd: {
+    justifyContent: 'flex-end',
+  },
 });
 
-export { horizontalScale, verticalScale, moderateScale, styles as default };
+export default styles;