react-native-unistyles 2.4.0-rc.2 → 2.5.0-rc.0

package/src/types/breakpoints.ts

@@ -2,6 +2,7 @@ import type { ColorValue, OpaqueColorValue } from 'react-native'
 import type { UnistylesTheme } from '../types'
 import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
 import type { TransformStyles } from './core'
+import type { UnistylesRuntime } from '../core'
 
 type ExtractTransformArray<T> = T extends object
     ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
@@ -56,6 +57,6 @@ type ParseStyleKeys<T> = T extends object
     ? { [K in keyof T]: ParseNestedObject<T[K]> }
     : never
 
-export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme) => infer R
+export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme, runtime: UnistylesRuntime) => infer R
     ? ParseStyleKeys<R>
     : ParseStyleKeys<T>

package/src/types/stylesheet.ts

@@ -1,6 +1,7 @@
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { UnistylesBreakpoints } from '../global'
+import type { UnistylesRuntime } from '../core'
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
@@ -46,4 +47,4 @@ export type StyleSheet = {
     [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
 }
 
-export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme) => StyleSheet) | StyleSheet
+export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme, runtime: UnistylesRuntime) => StyleSheet) | StyleSheet

package/src/useStyles.ts

@@ -26,7 +26,7 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
     const { theme, layout, plugins } = useUnistyles()
     const variants = useVariants(variantsMap)
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
-        ? stylesheet(theme)
+        ? stylesheet(theme, unistyles.runtime)
         : stylesheet, [theme, stylesheet, layout])
 
     const dynamicStyleSheet = useMemo(() => Object

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 };
         }
 };