responsive values changing based on width

Author: Mohit

README.md

@@ -20,15 +20,19 @@ npm i react-native-sugar-style
 
 STEP 1: **style.tsx**
 
-Define configurations for your theme see [this file](https://github.com/mohit23x/react-native-sugar-style/blob/main/example/style/index.tsx) for a more verbose example
+Define configurations for your theme, for more verbose example see [this file](https://github.com/mohit23x/react-native-sugar-style/blob/main/example/style/index.tsx).
 
 ```typescript
-import { Sugar, constants } from 'react-native-sugar-style';
+import Sugar from 'react-native-sugar-style';
 
-const theme = {
-  ...constants,
+const dark = {
+  background: '#2b2b2b',
+  text: '#ffffff',
+};
+
+const light = {
   background: '#fbfbfb',
-  text: '#2b2b2b',
+  text: '#000000',
 };
 
 export type Theme = typeof theme;
@@ -39,9 +43,9 @@ export default StyleSheet;
 
 <br />
 
-STEP 2: **App.tsx** (optional)
+STEP 2: **App.tsx**
 
-Wrap with ThemeProvider, if you are using a single theme then this step is not needed skip to STEP 3
+Wrap with ThemeProvider
 
 ```javascript
 import React from 'react';
@@ -59,7 +63,7 @@ const App = () => (
 
 STEP 3: **component.tsx**
 
-Use StyleSheet as you do normally in react native component
+Use StyleSheet as you do normally do in components
 
 ```javascript
 import React from 'react';
@@ -76,40 +80,41 @@ const Component = () => {
   );
 };
 
-const styles = StyleSheet.create((theme) => ({
+const styles = StyleSheet.create((theme, constants) => ({
   container: {
-    height: theme.constant.height,
-    width: theme.constant.width,
+    height: constants.height,
+    width: constants.width,
     backgroundColor: theme.background,
+    flexDirection: ['column', 'row'],
   },
   text: {
-    fontSize: theme.font.size,
+    fontSize: theme.size.m,
     color: theme.text,
   },
 }));
 ```
 
-> **NOTE**: if you have a single theme then `useTheme()` hook can be avoided, also if you add `useTheme()` in you navigation screen parent component, then you can avoid using it in child components\*
+> **NOTE**: if you add `useTheme()` in the navigation screen (parent component), then you can avoid using it in child components\*
 
 <br />
 
-STEP 4: **anotherComponent.tsx** (optional)
+STEP 4: **anotherComponent.tsx**
 
 To change the theme you can call build method and it will swap the theme
 
 ```javascript
 import React from 'react';
 import { View, Button } from 'react-native';
-import { StyleSheet, lightTheme, darkTheme } from './style';
+import { StyleSheet, light, dark } from './style';
 
 const Component = () => {
-  const light = () => StyleSheet.build(lightTheme);
-  const dark = () => StyleSheet.build(darkTheme);
+  const onLight = () => StyleSheet.build(light);
+  const onDark = () => StyleSheet.build(dark);
 
   return (
     <View>
-      <Button onPress={light} title="light" />
-      <Button onPress={dark} title="dark" />
+      <Button onPress={onLight} title="light theme" />
+      <Button onPress={onDark} title="dark theme" />
     </View>
   );
 };

build/Constant.d.ts

@@ -1,19 +1,30 @@
+export declare const calculateNavBarHeight: ({ screenHeight, height, }: {
+    screenHeight: number;
+    height: number;
+}) => number;
+export declare const calculateVisibleHeight: ({ height, navBarHeight, }: {
+    height: number;
+    navBarHeight: number;
+}) => number;
 export declare const constants: {
-    readonly constant: {
-        readonly height: number;
-        readonly width: number;
-        readonly screenHeight: number;
-        readonly screenWidth: number;
-        readonly navBarHeight: number;
-        readonly isNavBarVisible: boolean;
-        readonly visibleHeight: number;
-        readonly isIPhoneX: () => boolean;
-        readonly os: {
-            readonly android: boolean;
-            readonly ios: boolean;
-            readonly web: boolean;
-            readonly windows: boolean;
-        };
-        readonly statusBarHeight: number;
+    readonly height: number;
+    readonly width: number;
+    readonly screenHeight: number;
+    readonly screenWidth: number;
+    readonly statusBarHeight: number;
+    readonly navBarHeight: number;
+    readonly isNavBarVisible: boolean;
+    readonly visibleHeight: number;
+    readonly isIPhoneX: () => boolean;
+    readonly os: {
+        readonly android: boolean;
+        readonly ios: boolean;
+        readonly web: boolean;
+        readonly windows: boolean;
+    };
+    readonly breakPoints: {
+        mobile: number;
+        tablet: number;
+        desktop: number;
     };
 };

build/Constant.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.constants = void 0;
+exports.constants = exports.calculateVisibleHeight = exports.calculateNavBarHeight = void 0;
 const react_native_1 = require("react-native");
 const { height, width } = react_native_1.Dimensions.get('window');
 /* =========== */
@@ -20,26 +20,37 @@ const statusBarHeight = react_native_1.Platform.select({
 });
 /* ====== x ====== */
 const { height: screenHeight, width: screenWidth } = react_native_1.Dimensions.get('screen');
-const navBarHeight = screenHeight - statusBarHeight - height;
+exports.calculateNavBarHeight = ({ screenHeight, height, }) => {
+    return screenHeight - statusBarHeight - height;
+};
+const navBarHeight = exports.calculateNavBarHeight({
+    screenHeight,
+    height,
+});
 const isNavBarVisible = navBarHeight > 0;
-const visibleHeight = height - navBarHeight;
+exports.calculateVisibleHeight = ({ height, navBarHeight, }) => height - navBarHeight;
+const visibleHeight = exports.calculateVisibleHeight({ height, navBarHeight });
 const os = {
     android: react_native_1.Platform.OS === 'android',
     ios: react_native_1.Platform.OS === 'ios',
     web: react_native_1.Platform.OS === 'web',
     windows: react_native_1.Platform.OS === 'windows',
 };
+const breakPoints = {
+    mobile: 480,
+    tablet: 767,
+    desktop: 1280,
+};
 exports.constants = {
-    constant: {
-        height,
-        width,
-        screenHeight,
-        screenWidth,
-        navBarHeight,
-        isNavBarVisible,
-        visibleHeight,
-        isIPhoneX,
-        os,
-        statusBarHeight,
-    },
+    height,
+    width,
+    screenHeight,
+    screenWidth,
+    statusBarHeight,
+    navBarHeight,
+    isNavBarVisible,
+    visibleHeight,
+    isIPhoneX,
+    os,
+    breakPoints,
 };

build/Main.d.ts

@@ -2,11 +2,56 @@
 import Sugar from './Sugar';
 export default function Main<T>(theme: T): {
     StyleSheet: Sugar<T>;
-    ThemeContext: import("react").Context<T>;
+    ThemeContext: import("react").Context<{
+        theme: T;
+        constants: {
+            readonly height: number;
+            readonly width: number;
+            readonly screenHeight: number;
+            readonly screenWidth: number;
+            readonly statusBarHeight: number;
+            readonly navBarHeight: number;
+            readonly isNavBarVisible: boolean;
+            readonly visibleHeight: number;
+            readonly isIPhoneX: () => boolean;
+            readonly os: {
+                readonly android: boolean;
+                readonly ios: boolean;
+                readonly web: boolean;
+                readonly windows: boolean;
+            };
+            readonly breakPoints: {
+                mobile: number;
+                tablet: number;
+                desktop: number;
+            };
+        };
+    }>;
     ThemeProvider: import("react").ComponentType<{
         children: import("react").ReactNode;
         sugar?: Sugar<T> | undefined;
     }>;
-    useTheme: () => T;
+    useTheme: () => ({
+        readonly height: number;
+        readonly width: number;
+        readonly screenHeight: number;
+        readonly screenWidth: number;
+        readonly statusBarHeight: number;
+        readonly navBarHeight: number;
+        readonly isNavBarVisible: boolean;
+        readonly visibleHeight: number;
+        readonly isIPhoneX: () => boolean;
+        readonly os: {
+            readonly android: boolean;
+            readonly ios: boolean;
+            readonly web: boolean;
+            readonly windows: boolean;
+        };
+        readonly breakPoints: {
+            mobile: number;
+            tablet: number;
+            desktop: number;
+        };
+    } | T)[];
     withTheme: <P extends import("./type").ThemeProp<T>>(WrappedComponent: import("react").ComponentType<P>) => () => JSX.Element;
 };

build/Provider.d.ts

@@ -1,12 +1,36 @@
 import * as React from 'react';
 import Sugar from './Sugar';
-import type { ThemeProp } from './type';
+import type { ThemeProp, ConstantsType } from './type';
 export declare function themeCreator<T>(sugar: Sugar<T>, defaultTheme: T): {
-    ThemeContext: React.Context<T>;
+    ThemeContext: React.Context<{
+        theme: T;
+        constants: ConstantsType;
+    }>;
     ThemeProvider: React.ComponentType<{
         children: React.ReactNode;
         sugar?: Sugar<T> | undefined;
     }>;
-    useTheme: () => T;
+    useTheme: () => ({
+        readonly height: number;
+        readonly width: number;
+        readonly screenHeight: number;
+        readonly screenWidth: number;
+        readonly statusBarHeight: number;
+        readonly navBarHeight: number;
+        readonly isNavBarVisible: boolean;
+        readonly visibleHeight: number;
+        readonly isIPhoneX: () => boolean;
+        readonly os: {
+            readonly android: boolean;
+            readonly ios: boolean;
+            readonly web: boolean;
+            readonly windows: boolean;
+        };
+        readonly breakPoints: {
+            mobile: number;
+            tablet: number;
+            desktop: number;
+        };
+    } | T)[];
     withTheme: <P extends ThemeProp<T>>(WrappedComponent: React.ComponentType<P>) => () => JSX.Element;
 };

build/Provider.js

@@ -2,32 +2,62 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.themeCreator = void 0;
 const React = require("react");
+const react_native_1 = require("react-native");
+const Constant_1 = require("./Constant");
 /* PROVIDER */
 function createThemeProvider(sugar, ThemeContext, defaultTheme) {
     const ThemeProvider = ({ children, }) => {
         const [theme, setTheme] = React.useState(defaultTheme);
-        React.useEffect(() => {
+        const [constants, setConstants] = React.useState(Constant_1.constants);
+        const subscribeToThemeChanges = () => {
             sugar.subscribe('build', () => {
                 setTheme(sugar.theme);
+                setConstants(sugar.constants);
+            });
+        };
+        const onDimensionChange = ({ window: { height, width }, screen: { height: screenHeight, width: screenWidth }, }) => {
+            const navBarHeight = Constant_1.calculateNavBarHeight({
+                screenHeight,
+                height,
             });
+            const visibleHeight = Constant_1.calculateVisibleHeight({ height, navBarHeight });
+            const newValues = {
+                width,
+                height,
+                screenHeight,
+                screenWidth,
+                navBarHeight,
+                visibleHeight,
+            };
+            sugar.configure(newValues);
+        };
+        const subscribeToDimensionsChange = () => {
+            react_native_1.Dimensions.addEventListener('change', onDimensionChange);
+        };
+        React.useEffect(() => {
+            subscribeToThemeChanges();
+            subscribeToDimensionsChange();
+            return () => {
+                react_native_1.Dimensions.removeEventListener('change', onDimensionChange);
+            };
         }, []);
-        return (<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>);
+        return (<ThemeContext.Provider value={{ theme, constants }}>{children}</ThemeContext.Provider>);
     };
     return ThemeProvider;
 }
 /* creator */
 function themeCreator(sugar, defaultTheme) {
-    const ThemeContext = React.createContext(defaultTheme);
+    const ThemeContext = React.createContext({ theme: defaultTheme, constants: Constant_1.constants });
     const ThemeProvider = createThemeProvider(sugar, ThemeContext, defaultTheme);
     function useTheme() {
-        const theme = React.useContext(ThemeContext);
-        return theme;
+        const { theme, constants } = React.useContext(ThemeContext);
+        return [theme, constants];
     }
     function withTheme(WrappedComponent) {
         return function WithTheme() {
             return (<ThemeContext.Consumer>
-          {(theme) => {
-                const props = { theme };
+          {({ theme, constants }) => {
+                const props = { theme, constants };
                 return <WrappedComponent {...props}/>;
             }}
         </ThemeContext.Consumer>);

build/Sheet.d.ts

@@ -1,14 +1,13 @@
-import type { Fn, NamedStyles } from './type';
-export default class Sheet<T, S extends NamedStyles<S> | NamedStyles<any>> {
-    result: S;
+import type { ConstantsType, Fn, NamedStyles, StyleSheetType } from './type';
+export default class Sheet<T, S extends NamedStyles<S> | NamedStyles<any>, O extends StyleSheetType<O> | StyleSheetType<any>> {
+    result: O;
     source: Fn<T, S>;
-    nativeSheet: S;
-    globalVars: T | null;
+    nativeSheet: O;
     constructor(sourceFn: Fn<T, S>);
-    calc(globalVars: T): S;
-    getResult(): S;
+    calc(globalVars: T, constants: ConstantsType, activeIndex: number): O;
+    getResult(): O;
     clearResult(): void;
-    calcStyles(): void;
+    calcStyles(globalVars: T, constants: ConstantsType, activeIndex: number): void;
     calcStyle(key: string, styleProps: any): void;
     calcNative(): void;
 }