⚡ v0.1.0 with context

Author: Mohit

README.md

@@ -1,6 +1,6 @@
 # React Native Sugar Style
 
-Theme based alternative for React Native StyleSheet. (🧪 Highly Experimental)
+Theme based alternative for React Native StyleSheet. (🧪 Experimental)
 
 | BEFORE                                | AFTER                              |
 | ------------------------------------- | ---------------------------------- |
@@ -10,13 +10,17 @@ Theme based alternative for React Native StyleSheet. (🧪 Highly Experimental)
 
 ```
 yarn add react-native-sugar-style
+```
 
+```
 npm i react-native-sugar-style
 ```
 
 ### Usage
 
-**style.tsx** - define a configuration for you theme
+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
 
 ```typescript
 import { Sugar, constants } from 'react-native-sugar-style';
@@ -28,23 +32,45 @@ const theme = {
 };
 
 export type Theme = typeof theme;
-export const { StyleSheet } = new Sugar.init<Theme>(theme);
+export const { StyleSheet, ThemeProvider, useTheme } = Sugar.init<Theme>(theme);
 
 export default StyleSheet;
 ```
 
-**component.tsx** - use StyleSheet as you do normally
+STEP 2: **App.tsx** (optional)
+
+Wrap with ThemeProvider, if you are using a single theme then this step is not needed skip to STEP 3
 
 ```javascript
 import React from 'react';
-import { View, Text } from 'react-native';
-import StyleSheet from './style';
+import {ThemeProvider} from './style';
+import Navigation from './navigation';
 
-const Component = () => (
-  <View style={styles.container}>
-    <Text style={styles.text}>Hello World</Text>
-  </View>
+const App = () => (
+  <ThemeProvider>
+   <Navigation>
+  </ThemeProvider>
 );
+```
+
+STEP 3: **component.tsx**
+
+Use StyleSheet as you do normally in react native component
+
+```javascript
+import React from 'react';
+import { View, Text } from 'react-native';
+import { StyleSheet, useTheme } from './style';
+
+const Component = () => {
+  useTheme();
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Hello World</Text>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create((theme) => ({
   container: {
@@ -59,9 +85,33 @@ const styles = StyleSheet.create((theme) => ({
 }));
 ```
 
+> **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\*
+
+STEP 4: **anotherComponent.tsx** (optional)
+
+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 } from './style';
+
+const Component = () => {
+  const light = () => StyleSheet.build(lightTheme);
+  const dark = () => StyleSheet.build(darkTheme);
+
+  return (
+    <View>
+      <Button onPress={light} title="light" />
+      <Button onPress={dark} title="dark" />
+    </View>
+  );
+};
+```
+
 ### Demo
 
-Scan and run with expo go app, See example folder for a complete setup.
+Scan and run with expo go app, run the [example project](https://github.com/mohit23x/react-native-sugar-style/tree/main/example) for a more detailed example.
 https://expo.io/@mohit23x/projects/react-native-sugar-style
 
 ![Scan QR with expo app](assets/qr.png 'Scan QR')
@@ -85,7 +135,7 @@ Available as **theme.constant**
 
 ### Why this package?
 
-[There](https://github.com/vitalets/react-native-extended-stylesheet) [are](https://github.com/wvteijlingen/react-native-themed-styles) [many](https://github.com/wvteijlingen/react-native-themed-styles) [awesome](https://github.com/Shopify/restyle) [solutions](https://github.com/callstack/react-theme-provider) [for](https://www.npmjs.com/package/simple-theme) React Native. Through this package i wanted to explore and experiment a way to achieve a solution which is very similar to the existing react native code pattern, with the ability to get dynamic theme value and can be used in functional and class based components.
+[There](https://github.com/vitalets/react-native-extended-stylesheet) [are](https://github.com/wvteijlingen/react-native-themed-styles) [many](https://github.com/wvteijlingen/react-native-themed-styles) [awesome](https://github.com/Shopify/restyle) [solutions](https://github.com/callstack/react-theme-provider) [for](https://www.npmjs.com/package/simple-theme) [styling](https://github.com/nandorojo/dripsy) in React Native. Through this package i wanted to explore and experiment a way to achieve a development experience which is very similar to the existing react native pattern, with the ability to get dynamic theme value and can be used in functional and class based components.
 
 ### Acknowledgement
 
@@ -96,7 +146,4 @@ Special thanks to the Authors of the amazing open source libraries
 ### Caveats
 
 - May introduce performance issues (not tested)
-- Re-rendering on theme change causes mount and un-mounting of parent
-- re-renders when same theme is applied again
-- Caching not implemented
-- Dimension values are not dynamic
+- Dimension values are not dynamic (device height/width don't change based on orientation)

assets/after.png

@@ -0,0 +1,19 @@
+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;
+    };
+};

build/Constant.d.ts

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.constants = void 0;
+const react_native_1 = require("react-native");
+const { height, width } = react_native_1.Dimensions.get('window');
+/* =========== */
+// code credits: https://medium.com/codespace69/reactnative-ios-android-detect-screen-notch-status-bar-device-info-dc11b8c6a6a3
+const X_WIDTH = 375;
+const X_HEIGHT = 812;
+const XSMAX_WIDTH = 414;
+const XSMAX_HEIGHT = 896;
+const isIPhoneX = () => react_native_1.Platform.OS === 'ios' && !react_native_1.Platform.isPad && !react_native_1.Platform.isTVOS
+    ? (width === X_WIDTH && height === X_HEIGHT) ||
+        (width === XSMAX_WIDTH && height === XSMAX_HEIGHT)
+    : false;
+const statusBarHeight = react_native_1.Platform.select({
+    ios: isIPhoneX() ? 44 : 20,
+    android: react_native_1.StatusBar.currentHeight,
+    default: 0,
+});
+/* ====== x ====== */
+const { height: screenHeight, width: screenWidth } = react_native_1.Dimensions.get('screen');
+const navBarHeight = screenHeight - statusBarHeight - height;
+const isNavBarVisible = navBarHeight > 0;
+const visibleHeight = 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',
+};
+exports.constants = {
+    constant: {
+        height,
+        width,
+        screenHeight,
+        screenWidth,
+        navBarHeight,
+        isNavBarVisible,
+        visibleHeight,
+        isIPhoneX,
+        os,
+        statusBarHeight,
+    },
+};

build/Constant.js

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import Sugar from './Sugar';
+export default class Main {
+    init<T>(theme: T): {
+        StyleSheet: Sugar<T>;
+        ThemeContext: import("react").Context<T>;
+        ThemeProvider: import("react").ComponentType<{
+            children: import("react").ReactNode;
+            sugar?: Sugar<T> | undefined;
+        }>;
+        useTheme: () => T;
+        withTheme: <P extends import("./type").ThemeProp<T>>(WrappedComponent: import("react").ComponentType<P>) => () => JSX.Element;
+    };
+}

build/Main.d.ts

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Sugar_1 = require("./Sugar");
+const Provider_1 = require("./Provider");
+class Main {
+    init(theme) {
+        const StyleSheet = new Sugar_1.default(theme);
+        const { ThemeContext, ThemeProvider, useTheme, withTheme } = Provider_1.themeCreator(StyleSheet, theme);
+        return { StyleSheet, ThemeContext, ThemeProvider, useTheme, withTheme };
+    }
+}
+exports.default = Main;

build/Main.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Sugar from './Sugar';
+import type { ThemeProp } from './type';
+export declare function themeCreator<T>(sugar: Sugar<T>, defaultTheme: T): {
+    ThemeContext: React.Context<T>;
+    ThemeProvider: React.ComponentType<{
+        children: React.ReactNode;
+        sugar?: Sugar<T> | undefined;
+    }>;
+    useTheme: () => T;
+    withTheme: <P extends ThemeProp<T>>(WrappedComponent: React.ComponentType<P>) => () => JSX.Element;
+};

build/Provider.d.ts

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeCreator = void 0;
+const React = require("react");
+/* PROVIDER */
+function createThemeProvider(sugar, ThemeContext, defaultTheme) {
+    const ThemeProvider = ({ children, }) => {
+        const [theme, setTheme] = React.useState(defaultTheme);
+        React.useEffect(() => {
+            sugar.subscribe('build', () => {
+                setTheme(sugar.theme);
+            });
+        }, []);
+        return (<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>);
+    };
+    return ThemeProvider;
+}
+/* creator */
+function themeCreator(sugar, defaultTheme) {
+    const ThemeContext = React.createContext(defaultTheme);
+    const ThemeProvider = createThemeProvider(sugar, ThemeContext, defaultTheme);
+    function useTheme() {
+        const theme = React.useContext(ThemeContext);
+        return theme;
+    }
+    function withTheme(WrappedComponent) {
+        return function WithTheme() {
+            return (<ThemeContext.Consumer>
+          {(theme) => {
+                const props = { theme };
+                return <WrappedComponent {...props}/>;
+            }}
+        </ThemeContext.Consumer>);
+        };
+    }
+    return { ThemeContext, ThemeProvider, useTheme, withTheme };
+}
+exports.themeCreator = themeCreator;

build/Provider.js

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

build/Sheet.d.ts

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+class Sheet {
+    constructor(sourceFn) {
+        this.nativeSheet = {};
+        this.source = sourceFn;
+        this.globalVars = null;
+        this.result = {};
+    }
+    calc(globalVars) {
+        this.globalVars = globalVars;
+        this.clearResult();
+        this.calcStyles();
+        this.calcNative();
+        return this.getResult();
+    }
+    getResult() {
+        return this.result;
+    }
+    clearResult() {
+        // @ts-ignore
+        Object.keys(this.result).forEach((key) => delete this.result[key]);
+    }
+    calcStyles() {
+        if (this.globalVars) {
+            const restyle = this.source(this.globalVars);
+            Object.keys(restyle).forEach((key) => {
+                // @ts-ignore
+                const styles = restyle[key];
+                if (styles && typeof styles === 'object') {
+                    this.calcStyle(key, styles);
+                }
+                else {
+                    // @ts-ignore
+                    this.result[key] = styles;
+                }
+            });
+        }
+    }
+    calcStyle(key, styleProps) {
+        // @ts-ignore
+        this.nativeSheet[key] = styleProps;
+    }
+    calcNative() {
+        if (Object.keys(this.nativeSheet).length) {
+            const rnStyleSheet = react_native_1.StyleSheet.create(this.nativeSheet);
+            Object.assign(this.result, rnStyleSheet);
+        }
+    }
+}
+exports.default = Sheet;