app stylesheet

squarenotsquare/components/styles/AppStyles.js

@@ -0,0 +1,65 @@
+import { StyleSheet } from "react-native";
+import * as colors from '../../themes/Colors';
+import * as fonts from '../../themes/Fonts';
+import * as metrics from '../../themes/Metrics';
+
+export const styles = StyleSheet.create({
+    flex: {flex: 1},
+    flexDouble: {flex: 2},
+    flexTriple: {flex: 3},
+    flexHalf: {flex: 0.5},
+    flexThird: {flex: 0.33},
+    flexTwoThirds: {flex: 0.67},
+    flexRow: {flexDirection: 'row'},
+    flexColumn: {flexDirection: 'column'},
+    flexWrap: {flexWrap: 'wrap'},
+    flexShrink: {flexShrink: 1},
+  
+    centeredJustify: {justifyContent: 'center'},
+    centeredItems: {alignItems: 'center'},
+    centeredContent: {alignContent: 'center'},
+    centeredSelf: {alignSelf: 'center'},
+  
+    startAlign: {alignSelf: 'flex-start'},
+    endAlign: {alignSelf: 'flex-end'},
+    startJustify: {justifyContent: 'flex-start'},
+    endJustify: {justifyContent: 'flex-end'},
+  
+    stretch: {alignSelf: 'stretch'},
+    absolute: {
+        position: 'absolute',
+        top: metrics.screenSections.headerHeight,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+  
+    spaceBetween: {justifyContent: 'space-between'},
+    spaceEvenly: {justifyContent: 'space-evenly'},
+    spaceAround: {justifyContent: 'space-around'},
+  
+    centeredText: {textAlign: 'center'},
+    rightText: {textAlign: 'right'},
+    leftText: {textAlign: 'left'},
+  
+    headerTitleFont: {fontSize: fonts.headerTitle.size},
+    largeFont: {fontSize: fonts.large.size},
+    mediumFont: {fontSize: fonts.medium.size},
+    smallFont: {fontSize: fonts.small.size},
+    tinyFont: {fontSize: fonts.tiny.size},
+    subFont: {fontSize: fonts.subFont.size},
+    tickFont: {fontSize: fonts.tickFont.size},
+  
+    italic: {fontStyle: 'italic'},
+    greyText: {color: colors.material.grey600},
+    redText: {color: colors.material.red800},
+    blueText: {color: colors.material.blue400},
+    boldText: {fontWeight: 'bold'},
+  
+    lightText: {color: colors.impulseColors.lightText},
+    darkText: {color: colors.impulseColors.black},
+  
+    body: {
+      backgroundColor: colors.material.light,
+    }
+})