Merge pull request #4 from mohit23x/context-setup

added statusbar height in context

Author: mohit23x

example/components/Card.tsx

@@ -10,18 +10,19 @@ export default function Card() {
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
+const styles = StyleSheet.create(theme => ({
   container: {
     height: 250,
     backgroundColor: theme.surface,
     margin: theme.spacing.m,
     justifyContent: "center",
     alignItems: "center",
     borderRadius: theme.borderRadius.m,
+    marginTop: theme.constant.statusBarHeight
   },
   text: {
     color: theme.text,
     fontWeight: "700",
-    fontSize: theme.fontSize.l,
-  },
+    fontSize: theme.fontSize.l
+  }
 }));

example/components/Counter.tsx

@@ -7,20 +7,21 @@ export default function Counter() {
   useTheme();
 
   return (
-    <Pressable style={styles.pressable} onPress={() => setCount((c) => c + 1)}>
+    <Pressable style={styles.pressable} onPress={() => setCount(c => c + 1)}>
       <Text style={styles.text}>{`count: ${count}`}</Text>
     </Pressable>
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
+const styles = StyleSheet.create(theme => ({
   pressable: {
     width: theme.constant.width,
     alignItems: "center",
+    backgroundColor: theme.buttonPrimary
   },
   text: {
     fontSize: theme.fontSize.xl,
     color: theme.text,
-    padding: theme.spacing.l,
-  },
+    padding: theme.spacing.l
+  }
 }));

example/components/Toggle.tsx

@@ -4,6 +4,7 @@ import { StyleSheet, lightTheme, darkTheme } from "../style";
 
 export default function Toggle() {
   const isLight = StyleSheet.theme.name === "light";
+
   const onPress = () => {
     StyleSheet.build(isLight ? darkTheme : lightTheme);
   };

example/package.json

@@ -17,7 +17,7 @@
     "react-native-gesture-handler": "~1.8.0",
     "react-native-reanimated": "~1.13.0",
     "react-native-screens": "~2.15.0",
-    "react-native-sugar-style": "^0.0.6",
+    "react-native-sugar-style": "^0.0.8",
     "react-native-unimodules": "~0.12.0",
     "react-native-web": "~0.13.12"
   },

example/yarn.lock

@@ -6800,10 +6800,10 @@ react-native-screens@~2.15.0:
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.15.2.tgz#a449700e895b462937211ec72ed6f09652758f06"
   integrity sha512-CagNf2APXkVoRlF3Mugr264FbKbrBg9eXUkqhIPVeZB8EsdS8XPrnt99yj/pzmT+yJMBY0dGrjXT8+68WYh6YQ==
 
-react-native-sugar-style@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/react-native-sugar-style/-/react-native-sugar-style-0.0.6.tgz#faeec84a52cd033702d634bd3c778a6430434cf7"
-  integrity sha512-HDd8ZUVq2C35kB6RnyqMAWb9K/Y03vE133FZBYa0kZT0LyAICJBGjoehtBudREs7JrSm3//g7x0stHW1LBwsIA==
+react-native-sugar-style@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/react-native-sugar-style/-/react-native-sugar-style-0.0.8.tgz#a4558c99a350df052ef3007911ea7d45a54495a3"
+  integrity sha512-wgHJnG/wPFz12uVOFE3sT/G8s8x9s0UB4pv27moeSImZSuAv3seJzLf6L8vZDeLbpMZnAskvqBdg1Q9ijx6bUg==
 
 react-native-unimodules@~0.12.0:
   version "0.12.0"

lib/constant.ts

@@ -43,6 +43,7 @@ export const constants = {
     isNavBarVisible,
     visibleHeight,
     isIPhoneX,
-    os,      
+    os,
+    statusBarHeight
   }
 } as const;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sugar-style",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "React Native Stylesheet alternative with theme support",
   "author": "mohit23x",
   "license": "MIT",