feat: expose a secondary layout argument in createStyleSheet

src/hooks/useUnistyles.ts

@@ -13,7 +13,7 @@ export const useUnistyles = () => {
     const [layout, setLayout] = useState({
         breakpoint: unistyles.runtime.breakpoint,
         orientation: unistyles.runtime.orientation,
-        screenSize: {
+        screen: {
             width: unistyles.runtime.screen.width,
             height: unistyles.runtime.screen.height
         },
@@ -49,7 +49,7 @@ export const useUnistyles = () => {
                         return setLayout({
                             breakpoint: layoutEvent.payload.breakpoint,
                             orientation: layoutEvent.payload.orientation,
-                            screenSize: layoutEvent.payload.screen,
+                            screen: layoutEvent.payload.screen,
                             statusBar: layoutEvent.payload.statusBar,
                             insets: layoutEvent.payload.insets,
                             navigationBar: layoutEvent.payload.navigationBar

src/index.ts

@@ -1,7 +1,7 @@
 import { unistyles } from './core'
 import { mq } from './utils'
 import { useInitialTheme } from './hooks'
-import type { UnistylesPlugin, UnistylesValues } from './types'
+import type { UnistylesPlugin, UnistylesValues, UnistylesLayout } from './types'
 import type { UnistylesThemes, UnistylesBreakpoints } from './global'
 import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common'
 import { useStyles } from './useStyles'
@@ -47,5 +47,6 @@ export type {
     UnistylesThemes,
     UnistylesBreakpoints,
     UnistylesPlugin,
-    UnistylesValues
+    UnistylesValues,
+    UnistylesLayout
 }

src/types/breakpoints.ts

@@ -1,5 +1,5 @@
 import type { ColorValue, OpaqueColorValue } from 'react-native'
-import type { UnistylesTheme } from '../types'
+import type { UnistylesLayout, UnistylesTheme } from '../types'
 import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
 import type { TransformStyles } from './core'
 
@@ -56,6 +56,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, layout: UnistylesLayout) => infer R
     ? ParseStyleKeys<R>
     : ParseStyleKeys<T>

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 { UnistylesLayout } from './unistyles'
 
 // 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, layout: UnistylesLayout) => StyleSheet) | StyleSheet

src/types/unistyles.ts

@@ -80,3 +80,12 @@ export type UnistylesDynamicTypeSizeEvent = {
 }
 
 export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent | UnistylesDynamicTypeSizeEvent
+
+export type UnistylesLayout = {
+    breakpoint: keyof UnistylesBreakpoints,
+    orientation: (typeof ScreenOrientation)[keyof typeof ScreenOrientation],
+    screen: ScreenDimensions,
+    statusBar: ScreenDimensions,
+    navigationBar: ScreenDimensions,
+    insets: ScreenInsets,
+}

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, layout)
         : stylesheet, [theme, stylesheet, layout])
 
     const dynamicStyleSheet = useMemo(() => Object