react-native-unistyles 2.4.0 → 2.4.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
     "test:coverage": "jest --coverage",
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx",
-    "prepare": "husky install && bob build",
+    "prepare": "husky && bob build",
     "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'",
     "release": "release-it"
   },
@@ -43,6 +43,8 @@
     "react-native-macos",
     "react-native-windows",
     "react-native-web",
+    "react-native-tvos",
+    "react-native-visionos",
     "expo"
   ],
   "repository": "https://github.com/jpudysz/react-native-unistyles",
@@ -56,39 +58,40 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "18.4.3",
-    "@react-native/eslint-config": "0.74.0",
-    "@react-native/normalize-colors": "0.74.1",
+    "@commitlint/config-conventional": "19.2.2",
+    "@react-native/eslint-config": "0.74.84",
+    "@react-native/normalize-colors": "0.74.84",
     "@release-it/conventional-changelog": "8.0.1",
     "@testing-library/react-hooks": "8.0.1",
-    "@types/jest": "29.5.11",
-    "@types/react": "18.2.46",
-    "@typescript-eslint/eslint-plugin": "6.16.0",
-    "@typescript-eslint/eslint-plugin-tslint": "6.16.0",
-    "@typescript-eslint/parser": "6.16.0",
-    "commitlint": "18.4.3",
+    "@types/jest": "29.5.12",
+    "@types/react": "18.3.3",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
+    "@typescript-eslint/eslint-plugin-tslint": "6.21.0",
+    "@typescript-eslint/parser": "6.21.0",
+    "commitlint": "19.3.0",
     "concurrently": "8.2.2",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-codemask": "1.1.7",
-    "eslint-plugin-functional": "6.0.0",
+    "eslint-plugin-functional": "6.6.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsdoc": "46.10.1",
-    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-nested-if": "1.0.0",
     "eslint-plugin-no-else": "0.2.2",
-    "eslint-plugin-no-loops": "0.3.0",
+    "eslint-plugin-no-loops": "0.4.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "husky": "8.0.3",
+    "eslint-plugin-react": "7.34.3",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "husky": "9.0.11",
     "jest": "29.7.0",
-    "react": "18.2.0",
-    "react-native": "0.72.7",
+    "metro-react-native-babel-preset": "0.77.0",
+    "react": "18.3.1",
+    "react-native": "0.76.0",
     "react-native-builder-bob": "0.23.2",
-    "react-native-web": "0.19.9",
-    "react-test-renderer": "18.2.0",
-    "release-it": "17.0.1",
-    "typescript": "5.3.3"
+    "react-native-web": "0.19.12",
+    "react-test-renderer": "18.3.1",
+    "release-it": "17.4.0",
+    "typescript": "5.6.3"
   },
   "peerDependencies": {
     "@react-native/normalize-colors": "*",
@@ -109,13 +112,19 @@
       "optional": true
     }
   },
+  "resolutions": {
+    "@types/mime": "3.0.4"
+  },
   "workspaces": [
     "examples/expo",
     "examples/macos",
     "examples/win",
+    "examples/bare",
+    "examples/tv",
+    "examples/vision",
     "docs"
   ],
-  "packageManager": "yarn@3.6.1",
+  "packageManager": "yarn@3.6.4",
   "engines": {
     "node": ">= 18.0.0"
   },
@@ -124,6 +133,10 @@
     "modulePathIgnorePatterns": [
       "<rootDir>/examples/expo/node_modules",
       "<rootDir>/examples/macos/node_modules",
+      "<rootDir>/examples/win/node_modules",
+      "<rootDir>/examples/bare/node_modules",
+      "<rootDir>/examples/tv/node_modules",
+      "<rootDir>/examples/vision/node_modules",
       "<rootDir>/docs/node_modules",
       "<rootDir>/lib/"
     ],

package/react-native-unistyles.podspec

@@ -10,13 +10,16 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => min_ios_version_supported, :osx => "10.14" }
+  s.platforms    = { :ios => min_ios_version_supported, :osx => "10.14", :tvos => "9.0", :visionos => "1.0" }
   s.source       = { :git => package["repository"], :tag => "#{s.version}" }
 
   s.source_files = [
     "ios/**/*.{h,mm}",
     "cxx/*.{h,cpp}"
   ]
+  s.pod_target_xcconfig = {
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++20"
+  }
 
   install_modules_dependencies(s)
 end

package/src/UnistylesProvider.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import type { UnistylesBreakpoints } from './global'
+import type { ScreenDimensions, ScreenInsets, ScreenSize, UnistylesTheme } from './types'
+import { useSharedContext } from './hooks/useSharedContext'
+
+export type TUnistylesContext = {
+    plugins: Array<string>,
+    theme: UnistylesTheme,
+    layout: {
+        screen: ScreenSize,
+        statusBar: ScreenDimensions,
+        navigationBar: ScreenDimensions,
+        insets: ScreenInsets,
+        breakpoint: keyof UnistylesBreakpoints
+        orientation: 'landscape' | 'portrait'
+    }
+}
+
+export const UnistylesContext = React.createContext<TUnistylesContext | undefined>(undefined)
+
+export const UnistylesProvider = ({ children }: { children: React.ReactNode }) => {
+    const { plugins, theme, layout } = useSharedContext({
+        // intentionally false, we want to listen for changes in the provider
+        useContext: false,
+        deps: []
+    })
+
+    return (
+        <UnistylesContext.Provider value={{ theme, layout, plugins }}>
+            {children}
+        </UnistylesContext.Provider>
+    )
+}

package/src/common.ts

@@ -9,6 +9,8 @@ export const isIOS = Platform.OS === 'ios'
 export const isAndroid = Platform.OS === 'android'
 export const isMobile = isIOS || isAndroid
 export const isServer = typeof window === 'undefined'
+export const isDev = process.env.NODE_ENV !== 'production'
+export const isTest = process.env.NODE_ENV === 'test' || process.env.JEST_WORKER_ID !== undefined || typeof jest !== 'undefined'
 
 export const ScreenOrientation = {
     Landscape: 'landscape',
@@ -44,8 +46,7 @@ export enum AndroidContentSizeCategory {
 export enum UnistylesEventType {
     Theme = 'theme',
     Layout = 'layout',
-    Plugin = 'plugin',
-    DynamicTypeSize = 'dynamicTypeSize'
+    Plugin = 'plugin'
 }
 
 export enum UnistylesError {

package/src/core/UnistyleRegistry.ts

@@ -1,6 +1,6 @@
 import type { UnistylesBridge, UnistylesConfig, UnistylesPlugin } from '../types'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import { isWeb, UnistylesError } from '../common'
+import { isAndroid, isDev, isWeb, UnistylesError } from '../common'
 import { cssMediaQueriesPlugin, normalizeWebStylesPlugin } from '../plugins'
 
 export class UnistyleRegistry {
@@ -60,6 +60,14 @@ export class UnistyleRegistry {
             this.unistylesBridge.addPlugin(cssMediaQueriesPlugin.name, false)
         }
 
+        if (isWeb && config.windowResizeDebounceTimeMs !== undefined) {
+            this.unistylesBridge.setWindowResizeDebounceTimeMs(config.windowResizeDebounceTimeMs)
+        }
+
+        if (isAndroid && config.disableAnimatedInsets) {
+            this.unistylesBridge.disableAnimatedInsets()
+        }
+
         return {
             addBreakpoints: this.addBreakpoints,
             addThemes: this.addThemes
@@ -87,12 +95,18 @@ export class UnistyleRegistry {
             throw new Error(UnistylesError.InvalidPluginName)
         }
 
-        if (this.plugins.some(({ name }) => name === plugin.name)) {
-            throw new Error(UnistylesError.DuplicatePluginName)
+        const isAlreadyRegistered = this.plugins.some(({ name }) => name === plugin.name)
+
+        if (!isAlreadyRegistered) {
+            this.plugins = [plugin].concat(this.plugins)
+            this.unistylesBridge.addPlugin(plugin.name, notify)
+
+            return
         }
 
-        this.plugins = [plugin].concat(this.plugins)
-        this.unistylesBridge.addPlugin(plugin.name, notify)
+        if (!isDev) {
+            throw new Error(UnistylesError.DuplicatePluginName)
+        }
     }
 
     public removePlugin = (plugin: UnistylesPlugin) => {

package/src/core/Unistyles.ts

@@ -2,7 +2,8 @@ import { UnistylesModule } from './UnistylesModule'
 import { UnistylesRuntime } from './UnistylesRuntime'
 import { UnistyleRegistry } from './UnistyleRegistry'
 import type { UnistylesBridge } from '../types'
-import { UnistylesError, isWeb } from '../common'
+import { UnistylesError, isTest, isWeb } from '../common'
+import { UnistylesMockedBridge, UnistylesMockedRegistry, UnistylesMockedRuntime } from './mocks'
 
 class Unistyles {
     private _runtime: UnistylesRuntime
@@ -10,6 +11,14 @@ class Unistyles {
     private _bridge: UnistylesBridge
 
     constructor() {
+        if (isTest) {
+            this._bridge = new UnistylesMockedBridge() as unknown as UnistylesBridge
+            this._registry = new UnistylesMockedRegistry(this._bridge) as unknown as UnistyleRegistry
+            this._runtime = new UnistylesMockedRuntime(this._bridge, this._registry) as unknown as UnistylesRuntime
+
+            return
+        }
+
         const isInstalled = UnistylesModule?.install() ?? false
 
         if (!isInstalled) {

package/src/core/UnistylesModule.ts

@@ -1,11 +1,12 @@
 import { NativeEventEmitter, NativeModules } from 'react-native'
 import type { UnistylesThemes, UnistylesBreakpoints } from 'react-native-unistyles'
-import type { ColorSchemeName, ScreenInsets, ScreenDimensions } from '../types'
+import type { ColorSchemeName, ScreenInsets, StatusBar, NavigationBar, Color } from '../types'
 import { normalizeWebStylesPlugin } from '../plugins'
 import { isServer } from '../common'
 
 export class UnistylesBridgeWeb {
     #timerRef?: ReturnType<typeof setTimeout> = undefined
+    #windowResizeDebounceTimeMs: number = 100
     #hasAdaptiveThemes: boolean = false
     #supportsAutomaticColorScheme = false
     #screenWidth = isServer ? undefined : window.innerWidth
@@ -25,20 +26,29 @@ export class UnistylesBridgeWeb {
         bottom: 0,
         left: 0
     }
-    #statusBar: ScreenDimensions = {
+    #statusBar: StatusBar = {
         height: 0,
-        width: 0
+        width: 0,
+        setColor: () => {},
+        setHidden: () => {}
     }
-    #navigationBar: ScreenDimensions = {
+    #navigationBar: NavigationBar = {
         height: 0,
-        width: 0
+        width: 0,
+        setColor: () => {},
+        setHidden: () => {}
     }
+    #pixelRatio = 1.0
+    #fontScale = 1.0
+    #hairlineWidth = 1
+    #rtl = false
 
     constructor() {
         if (!isServer) {
             this.setupListeners()
             this.#screenWidth = window.innerWidth
             this.#screenHeight = window.innerHeight
+            this.#rtl = document.documentElement.dir === 'rtl'
         }
     }
 
@@ -74,6 +84,14 @@ export class UnistylesBridgeWeb {
                         return this.#statusBar
                     case 'navigationBar':
                         return this.#navigationBar
+                    case 'pixelRatio':
+                        return this.#pixelRatio
+                    case 'fontScale':
+                        return this.#fontScale
+                    case 'hairlineWidth':
+                        return this.#hairlineWidth
+                    case 'rtl':
+                        return this.#rtl
                     case 'useTheme':
                         return (themeName: keyof UnistylesThemes) => this.useTheme(themeName)
                     case 'updateTheme':
@@ -86,6 +104,16 @@ export class UnistylesBridgeWeb {
                         return (pluginName: string, notify: boolean) => this.addPlugin(pluginName, notify)
                     case 'removePlugin':
                         return (pluginName: string) => this.removePlugin(pluginName)
+                    case 'setRootViewBackgroundColor':
+                        return (color: Color | string) => this.setRootViewBackgroundColor(color)
+                    case 'setImmersiveMode':
+                        return () => {}
+                    case 'setWindowResizeDebounceTimeMs':
+                        return (timeMs: number) => {
+                            if (timeMs >= 0) {
+                                this.#windowResizeDebounceTimeMs = timeMs
+                            }
+                        }
                     default:
                         return Reflect.get(this, prop)
                 }
@@ -119,6 +147,10 @@ export class UnistylesBridgeWeb {
     }
 
     private updateTheme(themeName: keyof UnistylesThemes) {
+        if (!this.#themeName) {
+            this.#themeName = this.getTheme()
+        }
+
         if (this.#themeName === themeName) {
             this.emitThemeChange()
         }
@@ -162,7 +194,6 @@ export class UnistylesBridgeWeb {
     }
 
     private getTheme(): keyof UnistylesThemes {
-
         if (this.#themes.length === 1) {
             return this.#themes.at(0) as keyof UnistylesThemes
         }
@@ -171,16 +202,21 @@ export class UnistylesBridgeWeb {
     }
 
     private setupListeners() {
-        window.addEventListener('resize', () => {
-            clearTimeout(this.#timerRef)
+        const onResize = () => {
+            this.#screenWidth = window.innerWidth
+            this.#screenHeight = window.innerHeight
+            this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth)
+
+            this.emitLayoutChange()
+        }
 
-            this.#timerRef = setTimeout(() => {
-                this.#screenWidth = window.innerWidth
-                this.#screenHeight = window.innerHeight
-                this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth)
+        window.addEventListener('resize', () => {
+            if (this.#windowResizeDebounceTimeMs === 0) {
+                return onResize()
+            }
 
-                this.emitLayoutChange()
-            }, 100)
+            clearTimeout(this.#timerRef)
+            this.#timerRef = setTimeout(onResize, this.#windowResizeDebounceTimeMs)
         })
 
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
@@ -197,6 +233,13 @@ export class UnistylesBridgeWeb {
                 this.emitThemeChange()
             }
         })
+
+        new MutationObserver(() => {
+            this.#rtl = document.documentElement.dir === 'rtl'
+        }).observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['dir']
+        })
     }
 
     private getBreakpointFromScreenWidth(width: number): keyof UnistylesBreakpoints {
@@ -223,6 +266,10 @@ export class UnistylesBridgeWeb {
         return 'light'
     }
 
+    private setRootViewBackgroundColor(color?: Color | string) {
+        document.body.style.backgroundColor = color as string
+    }
+
     private emitPluginChange() {
         this.#unistylesEvents.emit('__unistylesOnChange', {
             type: 'plugin'

package/src/core/UnistylesRuntime.ts

@@ -1,7 +1,8 @@
 import { ScreenOrientation, UnistylesError } from '../common'
-import type { UnistylesBridge, UnistylesPlugin } from '../types'
+import type { Color, UnistylesBridge, UnistylesPlugin } from '../types'
 import type { UnistylesThemes } from '../global'
 import type { UnistyleRegistry } from './UnistyleRegistry'
+import { parseColor } from '../utils/parseColor'
 
 /**
  * Utility to interact with the Unistyles during runtime
@@ -9,6 +10,32 @@ import type { UnistyleRegistry } from './UnistyleRegistry'
 export class UnistylesRuntime {
     constructor(private unistylesBridge: UnistylesBridge, private unistylesRegistry: UnistyleRegistry) {}
 
+    /**
+     * Get the mini runtime injected to creteStyleSheet
+     * @returns - The mini runtime
+     */
+    public get miniRuntime() {
+        return {
+            contentSizeCategory: this.contentSizeCategory,
+            breakpoint: this.breakpoint,
+            screen: this.screen,
+            insets: this.insets,
+            statusBar: {
+                width: this.statusBar.width,
+                height: this.statusBar.height
+            },
+            navigationBar: {
+                width: this.navigationBar.width,
+                height: this.navigationBar.height
+            },
+            orientation: this.orientation,
+            pixelRatio: this.pixelRatio,
+            fontScale: this.fontScale,
+            hairlineWidth: this.hairlineWidth,
+            rtl: this.rtl
+        }
+    }
+
     /**
      * Get the current color scheme
      * @returns - The current color scheme
@@ -17,6 +44,14 @@ export class UnistylesRuntime {
         return this.unistylesBridge.colorScheme
     }
 
+    /**
+     * Get the layout direction
+     * @returns - Boolean indicating if the layout direction is RTL
+     */
+    public get rtl() {
+        return this.unistylesBridge.rtl
+    }
+
     /**
      * Get info about adaptive themes
      * @returns - boolean indicating if the adaptive themes are enabled
@@ -59,6 +94,7 @@ export class UnistylesRuntime {
 
     /**
      * Get the names of currently enabled plugins
+     * @deprecated - Plugins will be removed in the next major release
      * @returns - The names of currently enabled plugins
      */
     public get enabledPlugins() {
@@ -86,18 +122,36 @@ export class UnistylesRuntime {
 
     /**
      * Get the status bar info
-     * @returns - The status bar size { width, height }
+     * @returns - The status bar api { width, height, setColor, setHidden }
      */
     public get statusBar() {
-        return this.unistylesBridge.statusBar
+        return {
+            width: this.unistylesBridge.statusBar.width,
+            height: this.unistylesBridge.statusBar.height,
+            setColor: (color?: Color, alpha?: number) => {
+                const [parsedColor, parsedAlpha] = parseColor(color, alpha)
+
+                this.unistylesBridge.statusBar.setColor(parsedColor, parsedAlpha)
+            },
+            setHidden: (hidden: boolean) => this.unistylesBridge.statusBar.setHidden(hidden)
+        }
     }
 
     /**
      * Get the navigation bar info (Android)
-     * @returns - The navigation bar size { width, height }
+     * @returns - The navigation bar api { width, height, setColor, setHidden }
      */
     public get navigationBar() {
-        return this.unistylesBridge.navigationBar
+        return {
+            width: this.unistylesBridge.navigationBar.width,
+            height: this.unistylesBridge.navigationBar.height,
+            setColor: (color?: Color, alpha?: number) => {
+                const [parsedColor, parsedAlpha] = parseColor(color, alpha)
+
+                this.unistylesBridge.navigationBar.setColor(parsedColor, parsedAlpha)
+            },
+            setHidden: (hidden: boolean) => this.unistylesBridge.navigationBar.setHidden(hidden)
+        }
     }
 
     /**
@@ -114,6 +168,65 @@ export class UnistylesRuntime {
         return ScreenOrientation.Portrait
     }
 
+    /**
+     * Get the pixel ratio
+     * @returns - The pixel ratio
+     */
+    public get pixelRatio() {
+        return this.unistylesBridge.pixelRatio
+    }
+
+    /**
+     * Get the font scale
+     * @returns - The font scale
+     */
+    public get fontScale() {
+        return parseFloat(this.unistylesBridge.fontScale.toFixed(2))
+    }
+
+    /**
+     * Get the hairline width
+     * @returns - The thinnest width of the platform
+     */
+    public get hairlineWidth() {
+        const pixelRatio = this.pixelRatio
+        const nearestPixel = Math.trunc(pixelRatio * 0.4) || 1
+
+        return nearestPixel / pixelRatio
+    }
+
+    /**
+     * Get theme by name
+     * @param themeName - The name of the theme to get or current theme if not specified
+     * @returns - The theme
+     */
+    public getTheme(themeName?: keyof UnistylesThemes) {
+        if (!themeName) {
+            return this.unistylesRegistry.getTheme(this.themeName)
+        }
+
+        return this.unistylesRegistry.getTheme(themeName)
+    }
+
+    /**
+     * Get the immersive mode (both status bar and navigation bar hidden (Android))
+     * @param isEnabled
+     */
+    public setImmersiveMode(isEnabled: boolean) {
+        return this.unistylesBridge.setImmersiveMode(isEnabled)
+    }
+
+    /**
+     * Set the root view background color
+     * @param color - The color to set
+     * @param alpha - Color alpha - default is 1
+     */
+    public setRootViewBackgroundColor = (color?: Color, alpha?: number) => {
+        const [parsedColor, parsedAlpha] = parseColor(color, alpha)
+
+        this.unistylesBridge.setRootViewBackgroundColor(parsedColor, parsedAlpha)
+    }
+
     /**
      * Switch to a different theme
      * @param name - The name of the theme to switch to
@@ -153,6 +266,7 @@ export class UnistylesRuntime {
 
     /**
      * Enable a plugin
+     * @deprecated - Plugins will be removed in the next major release
      * @param plugin - Plugin that conforms to UnistylesPlugin interface
      */
     public addPlugin = (plugin: UnistylesPlugin) => {
@@ -161,6 +275,7 @@ export class UnistylesRuntime {
 
     /**
      * Disable a plugin
+     * @deprecated - Plugins will be removed in the next major release
      * @param plugin - Plugin that conforms to UnistylesPlugin interface
      */
     public removePlugin = (plugin: UnistylesPlugin) => {

package/src/core/index.ts

@@ -1,2 +1,8 @@
-export { unistyles } from './Unistyles'
+import { unistyles } from './Unistyles'
 export type { UnistylesRuntime } from './UnistylesRuntime'
+
+export type UnistylesMiniRuntime = typeof unistyles.runtime.miniRuntime
+
+export {
+    unistyles
+}

package/src/core/mocks/UnistylesMockedBridge.ts

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import type { UnistylesThemes, UnistylesBreakpoints } from '../../global'
+
+export class UnistylesMockedBridge {
+    constructor() {}
+
+    public screenWidth() {}
+    public screenHeight() {}
+    public enabledPlugins() {}
+    public hasAdaptiveThemes() {}
+    public themeName() {}
+    public breakpoint() {}
+    public colorScheme() {}
+    public contentSizeCategory() {}
+    public sortedBreakpointPairs() {}
+    public insets() {}
+    public pixelRatio() {}
+    public fontScale() {}
+    public statusBar() {}
+    public navigationBar() {}
+    public themes(themes: Array<keyof UnistylesThemes>) {}
+    public useBreakpoints(breakpoints: UnistylesBreakpoints) {}
+    public useTheme(name: keyof UnistylesThemes) {}
+    public updateTheme(name: keyof UnistylesThemes) {}
+    public useAdaptiveThemes(enable: boolean) {}
+    public addPlugin(pluginName: string, notify: boolean) {}
+    public removePlugin(pluginName: string) {}
+    public setRootViewBackgroundColor(color?: string, alpha?: number) {}
+    public setImmersiveMode(isEnabled: boolean) {}
+}