react-native-unistyles 2.4.0-rc.1 → 2.4.0

package/lib/typescript/src/core/UnistylesRuntime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnistylesRuntime.d.ts","sourceRoot":"","sources":["../../../../src/core/UnistylesRuntime.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D;;GAEG;AACH,qBAAa,gBAAgB;IACb,OAAO,CAAC,eAAe;IAAmB,OAAO,CAAC,iBAAiB;gBAA3D,eAAe,EAAE,eAAe,EAAU,iBAAiB,EAAE,gBAAgB;IAEjG;;;OAGG;IACH,IAAW,WAAW,uCAErB;IAED;;;OAGG;IACH,IAAW,iBAAiB,YAE3B;IAED;;;OAGG;IACH,IAAW,SAAS,UAEnB;IAED;;;OAGG;IACH,IAAW,mBAAmB,gGAE7B;IAED;;;OAGG;IACH,IAAW,UAAU,mDAEpB;IAED;;;OAGG;IACH,IAAW,WAAW,6CAErB;IAED;;;OAGG;IACH,IAAW,cAAc,aAExB;IAED;;;OAGG;IACH,IAAW,MAAM;;;MAKhB;IAED;;;OAGG;IACH,IAAW,MAAM,oCAEhB;IAED;;;OAGG;IACH,IAAW,SAAS,2CAEnB;IAED;;;OAGG;IACH,IAAW,WAAW,6BAQrB;IAED;;;;OAIG;IACI,QAAQ,SAAU,MAAM,eAAe,sBAY7C;IAED;;;;;OAKG;IACI,WAAW,SAAU,MAAM,eAAe,mBAAmB,eAAe,CAAC,MAAM,eAAe,CAAC,KAAK,eAAe,CAAC,MAAM,eAAe,CAAC,UAEpJ;IAED;;;OAGG;IACI,iBAAiB,WAAY,OAAO,UAE1C;IAED;;;OAGG;IACI,SAAS,WAAY,eAAe,UAE1C;IAED;;;OAGG;IACI,YAAY,WAAY,eAAe,UAE7C;CACJ"}
+{"version":3,"file":"UnistylesRuntime.d.ts","sourceRoot":"","sources":["../../../../src/core/UnistylesRuntime.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D;;GAEG;AACH,qBAAa,gBAAgB;IACb,OAAO,CAAC,eAAe;IAAmB,OAAO,CAAC,iBAAiB;gBAA3D,eAAe,EAAE,eAAe,EAAU,iBAAiB,EAAE,gBAAgB;IAEjG;;;OAGG;IACH,IAAW,WAAW,uCAErB;IAED;;;OAGG;IACH,IAAW,iBAAiB,YAE3B;IAED;;;OAGG;IACH,IAAW,SAAS,UAEnB;IAED;;;OAGG;IACH,IAAW,mBAAmB,gGAE7B;IAED;;;OAGG;IACH,IAAW,UAAU,mDAEpB;IAED;;;OAGG;IACH,IAAW,WAAW,6CAErB;IAED;;;OAGG;IACH,IAAW,cAAc,aAExB;IAED;;;OAGG;IACH,IAAW,MAAM;;;MAKhB;IAED;;;OAGG;IACH,IAAW,MAAM,oCAEhB;IAED;;;OAGG;IACH,IAAW,SAAS,wCAEnB;IAED;;;OAGG;IACH,IAAW,aAAa,wCAEvB;IAED;;;OAGG;IACH,IAAW,WAAW,6BAQrB;IAED;;;;OAIG;IACI,QAAQ,SAAU,MAAM,eAAe,sBAY7C;IAED;;;;;OAKG;IACI,WAAW,SAAU,MAAM,eAAe,mBAAmB,eAAe,CAAC,MAAM,eAAe,CAAC,KAAK,eAAe,CAAC,MAAM,eAAe,CAAC,UAEpJ;IAED;;;OAGG;IACI,iBAAiB,WAAY,OAAO,UAE1C;IAED;;;OAGG;IACI,SAAS,WAAY,eAAe,UAE1C;IAED;;;OAGG;IACI,YAAY,WAAY,eAAe,UAE7C;CACJ"}

package/lib/typescript/src/hooks/useUnistyles.d.ts

@@ -8,6 +8,20 @@ export declare const useUnistyles: () => {
             width: number;
             height: number;
         };
+        statusBar: {
+            width: number;
+            height: number;
+        };
+        navigationBar: {
+            width: number;
+            height: number;
+        };
+        insets: {
+            top: number;
+            bottom: number;
+            left: number;
+            right: number;
+        };
     };
     contentSizeCategory: import("../common").IOSContentSizeCategory | import("../common").AndroidContentSizeCategory;
 };

package/lib/typescript/src/hooks/useUnistyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useUnistyles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY;;;;;;;;;;;;CAuDxB,CAAA"}
+{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useUnistyles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;CAwExB,CAAA"}

package/lib/typescript/src/types/unistyles.d.ts

@@ -9,7 +9,7 @@ export type ScreenInsets = {
     bottom: number;
     left: number;
 };
-export type StatusBarDimensions = {
+export type ScreenDimensions = {
     height: number;
     width: number;
 };
@@ -30,7 +30,8 @@ export type UnistylesBridge = {
     contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory;
     sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>;
     insets: ScreenInsets;
-    statusBar: StatusBarDimensions;
+    statusBar: ScreenDimensions;
+    navigationBar: ScreenDimensions;
     themes: Array<keyof UnistylesThemes>;
     useBreakpoints(breakpoints: UnistylesBreakpoints): void;
     useTheme(name: keyof UnistylesThemes): void;
@@ -49,6 +50,9 @@ export type UnistylesMobileLayoutEvent = {
     type: UnistylesEventType.Layout;
     payload: {
         screen: ScreenSize;
+        statusBar: ScreenDimensions;
+        navigationBar: ScreenDimensions;
+        insets: ScreenInsets;
         breakpoint: keyof UnistylesBreakpoints;
         orientation: typeof ScreenOrientation[keyof typeof ScreenOrientation];
     };

package/lib/typescript/src/types/unistyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unistyles.d.ts","sourceRoot":"","sources":["../../../../src/types/unistyles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"unistyles.d.ts","sourceRoot":"","sources":["../../../../src/types/unistyles.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/src/common.ts

@@ -16,6 +16,11 @@ export const ScreenOrientation = {
 } as const
 
 export enum IOSContentSizeCategory {
+    AccessibilityExtraExtraExtraLarge = 'accessibilityExtraExtraExtraLarge',
+    AccessibilityExtraExtraLarge = 'accessibilityExtraExtraLarge',
+    AccessibilityExtraLarge = 'accessibilityExtraLarge',
+    AccessibilityLarge = 'accessibilityLarge',
+    AccessibilityMedium = 'accessibilityMedium',
     ExtraExtraExtraLarge = 'xxxLarge',
     ExtraExtraLarge = 'xxLarge',
     ExtraLarge = 'xLarge',
@@ -31,7 +36,9 @@ export enum AndroidContentSizeCategory {
     Default = 'Default',
     Large = 'Large',
     ExtraLarge = 'ExtraLarge',
-    Huge = 'Huge'
+    Huge = 'Huge',
+    ExtraHuge = 'ExtraHuge',
+    ExtraExtraHuge = 'ExtraExtraHuge'
 }
 
 export enum UnistylesEventType {

package/src/core/UnistylesModule.ts

@@ -1,6 +1,6 @@
 import { NativeEventEmitter, NativeModules } from 'react-native'
 import type { UnistylesThemes, UnistylesBreakpoints } from 'react-native-unistyles'
-import type { ColorSchemeName, ScreenInsets, StatusBarDimensions } from '../types'
+import type { ColorSchemeName, ScreenInsets, ScreenDimensions } from '../types'
 import { normalizeWebStylesPlugin } from '../plugins'
 import { isServer } from '../common'
 
@@ -25,7 +25,11 @@ export class UnistylesBridgeWeb {
         bottom: 0,
         left: 0
     }
-    #statusBar: StatusBarDimensions = {
+    #statusBar: ScreenDimensions = {
+        height: 0,
+        width: 0
+    }
+    #navigationBar: ScreenDimensions = {
         height: 0,
         width: 0
     }
@@ -68,6 +72,8 @@ export class UnistylesBridgeWeb {
                         return this.#insets
                     case 'statusBar':
                         return this.#statusBar
+                    case 'navigationBar':
+                        return this.#navigationBar
                     case 'useTheme':
                         return (themeName: keyof UnistylesThemes) => this.useTheme(themeName)
                     case 'updateTheme':

package/src/core/UnistylesRuntime.ts

@@ -92,6 +92,14 @@ export class UnistylesRuntime {
         return this.unistylesBridge.statusBar
     }
 
+    /**
+     * Get the navigation bar info (Android)
+     * @returns - The navigation bar size { width, height }
+     */
+    public get navigationBar() {
+        return this.unistylesBridge.navigationBar
+    }
+
     /**
      * Get the screen orientation
      * @returns - The screen orientation

package/src/hooks/useUnistyles.ts

@@ -16,6 +16,20 @@ export const useUnistyles = () => {
         screenSize: {
             width: unistyles.runtime.screen.width,
             height: unistyles.runtime.screen.height
+        },
+        statusBar: {
+            width: unistyles.runtime.statusBar.width,
+            height: unistyles.runtime.statusBar.height
+        },
+        navigationBar: {
+            width: unistyles.runtime.navigationBar.width,
+            height: unistyles.runtime.navigationBar.height
+        },
+        insets: {
+            top: unistyles.runtime.insets.top,
+            bottom: unistyles.runtime.insets.bottom,
+            left: unistyles.runtime.insets.left,
+            right: unistyles.runtime.insets.right
         }
     })
 
@@ -35,7 +49,10 @@ export const useUnistyles = () => {
                         return setLayout({
                             breakpoint: layoutEvent.payload.breakpoint,
                             orientation: layoutEvent.payload.orientation,
-                            screenSize: layoutEvent.payload.screen
+                            screenSize: layoutEvent.payload.screen,
+                            statusBar: layoutEvent.payload.statusBar,
+                            insets: layoutEvent.payload.insets,
+                            navigationBar: layoutEvent.payload.navigationBar
                         })
                     }
                     case UnistylesEventType.Plugin: {

package/src/types/unistyles.ts

@@ -12,7 +12,7 @@ export type ScreenInsets = {
     left: number
 }
 
-export type StatusBarDimensions = {
+export type ScreenDimensions = {
     height: number,
     width: number
 }
@@ -36,7 +36,8 @@ export type UnistylesBridge = {
     contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory,
     sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
     insets: ScreenInsets,
-    statusBar: StatusBarDimensions,
+    statusBar: ScreenDimensions,
+    navigationBar: ScreenDimensions
 
     // setters
     themes: Array<keyof UnistylesThemes>,
@@ -59,6 +60,9 @@ export type UnistylesMobileLayoutEvent = {
     type: UnistylesEventType.Layout,
     payload: {
         screen: ScreenSize,
+        statusBar: ScreenDimensions,
+        navigationBar: ScreenDimensions,
+        insets: ScreenInsets,
         breakpoint: keyof UnistylesBreakpoints,
         orientation: typeof ScreenOrientation[keyof typeof ScreenOrientation]
     }

package/windows/ReactNativeUnistyles/ReactNativeUnistyles.h

@@ -18,8 +18,7 @@ using namespace winrt::Windows::UI::Core;
 using namespace facebook;
 
 struct UIInitialInfo {
-    int screenWidth;
-    int screenHeight;
+    Dimensions screen;
     std::string colorScheme;
     std::string contentSizeCategory;
 };
@@ -39,7 +38,9 @@ struct Unistyles {
                 auto bounds = Window::Current().Bounds();
 
                 if (this->unistylesRuntime != nullptr) {
-                    ((UnistylesRuntime*)this->unistylesRuntime)->handleScreenSizeChange((int)bounds.Width, (int)bounds.Height, this->getInsets(), this->getStatusBarDimensions());
+                    Dimensions screenDimensions = Dimensions{(int)bounds.Width, (int)bounds.Height};
+
+                    ((UnistylesRuntime*)this->unistylesRuntime)->handleScreenSizeChange(screenDimensions, this->getInsets(), this->getStatusBarDimensions(), this->getNavigationBarDimensions());
                 }
             }));
 
@@ -80,8 +81,7 @@ struct Unistyles {
             UIInitialInfo uiMetadata;
             auto bounds = Window::Current().Bounds();
 
-            uiMetadata.screenWidth = bounds.Width;
-            uiMetadata.screenHeight = bounds.Height;
+            uiMetadata.screen = Dimensions{(int)bounds.Width, (int)bounds.Height};
             uiMetadata.colorScheme = this->getColorScheme();
             uiMetadata.contentSizeCategory = UnistylesUnspecifiedScheme;
 
@@ -91,12 +91,12 @@ struct Unistyles {
         UIInitialInfo uiInfo = uiInfoFuture.get();
 
         auto unistylesRuntime = std::make_shared<UnistylesRuntime>(
-            uiInfo.screenWidth,
-            uiInfo.screenHeight,
+            uiInfo.screen,
             uiInfo.colorScheme,
             uiInfo.contentSizeCategory,
             this->getInsets(),
-            this->getStatusBarDimensions()
+            this->getStatusBarDimensions(),
+            this->getNavigationBarDimensions()
         );
 
         unistylesRuntime->onThemeChange([this](std::string theme) {
@@ -110,16 +110,30 @@ struct Unistyles {
             this->OnThemeChange(payload);
         });
 
-        unistylesRuntime.get()->onLayoutChange([this](std::string breakpoint, std::string orientation, int width, int height) {
+        unistylesRuntime.get()->onLayoutChange([this](std::string breakpoint, std::string orientation, Dimensions& screen, Dimensions& statusBar, Insets& insets, Dimensions& navigationBar) {
             auto payload = winrt::Microsoft::ReactNative::JSValueObject{
                 {"type", "layout"},
                 {"payload", winrt::Microsoft::ReactNative::JSValueObject{
                     {"breakpoint", breakpoint},
                     {"orientation", orientation},
                     {"screen", winrt::Microsoft::ReactNative::JSValueObject{
-                        {"width", width},
-                        {"height", height}
-                    }}
+                        {"width", screen.width},
+                        {"height", screen.height}
+                    }},
+                    {"statusBar", winrt::Microsoft::ReactNative::JSValueObject{
+                        {"width", statusBar.width},
+                        {"height", statusBar.height}
+                    }},
+                    {"navigationBar", winrt::Microsoft::ReactNative::JSValueObject{
+                        {"width", navigationBar.width},
+                        {"height", navigationBar.height}
+                    }},
+                    {"insets", winrt::Microsoft::ReactNative::JSValueObject{
+                        {"top", insets.top},
+                        {"bottom", insets.bottom},
+                        {"left", insets.left},
+                        {"right", insets.right}
+                    }},
                 }}
             };
 
@@ -195,24 +209,16 @@ struct Unistyles {
             return UnistylesUnspecifiedScheme;
         }
 
-        std::map<std::string, int>getInsets() {
-            std::map<std::string, int> insets;
-
-            insets.insert({ "top", 0 });
-            insets.insert({ "bottom", 0 });
-            insets.insert({ "left", 0 });
-            insets.insert({ "right", 0 });
-
-            return insets;
+        Insets getInsets() {
+            return Insets{ 0, 0, 0, 0 };
         }
 
-        std::map<std::string, int>getStatusBarDimensions() {
-            std::map<std::string, int> statusBar;
-
-            statusBar.insert({ "height", 0 });
-            statusBar.insert({ "width", 0 });
+        Dimensions getStatusBarDimensions() {
+            return {0, 0};
+        }
 
-            return statusBar;
+        Dimensions getNavigationBarDimensions() {
+            return { 0, 0 };
         }
 };