Add responsive design

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

src/styles.tsx

@@ -1,17 +1,35 @@
-import { StyleSheet } from 'react-native';
+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;
 
 const styles = StyleSheet.create({
   marginBottom: {
-    marginBottom: 15,
+    marginBottom: verticalScale(5),
+  },
+  padding: {
+    padding: '5%',
   },
   spaceBetweenHorizontal: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   centerText: {
     textAlign: 'center',
   },
 });
 
-export default styles;
+export { horizontalScale, verticalScale, moderateScale, styles as default };