feat: add a secondary layout argument in createStyleSheet

docs/src/content/docs/other/sponsors.mdx

@@ -107,6 +107,12 @@ Do you want to become a sponsor? Read a guide [for sponsors](/other/for-sponsors
         size="40"
         link="https://github.com/efstathiosntonas"
     />
+    <Sponsor
+        url="https://avatars.githubusercontent.com/u/6288237?v=4"
+        name="justblender"
+        size="40"
+        link="https://github.com/justblender"
+    />
 </div>
 
 </Seo>

docs/src/content/docs/reference/create-stylesheet.mdx

@@ -64,6 +64,22 @@ const stylesheet = createStyleSheet(theme => ({
 }))
 ```
 
+In addition to the `theme` argument, you can also accept the `runtime` argument when passing a function. This can be useful for accessing `UnistylesRuntime` and its properties (such as screen orientation, dimensions, insets, and more) without having to import this class directly.
+
+```ts /runtime/
+const stylesheet = createStyleSheet((theme, runtime) => ({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingTop: runtime.insets.top,
+        backgroundColor: runtime.orientation === 'portrait'
+            ? theme.colors.accent
+            : theme.colors.oak
+    },
+}))
+```
+
 Importantly, you'll receive the same TypeScript hints as with `StyleSheet.create`!
 
 </Seo>

examples/expo/src/examples/RuntimeScreen.tsx

@@ -183,7 +183,7 @@ export const RuntimeScreen: React.FunctionComponent = () => {
     )
 }
 
-const stylesheet = createStyleSheet(theme => ({
+const stylesheet = createStyleSheet((theme, runtime) => ({
     container: {
         flex: 1,
         paddingTop: 50,
@@ -228,15 +228,15 @@ const stylesheet = createStyleSheet(theme => ({
     },
     topInset: {
         position: 'absolute',
-        top: UnistylesRuntime.insets.top,
+        top: runtime.insets.top,
         left: 0,
         right: 0,
         height: 1,
         backgroundColor: theme.colors.accent
     },
     bottomInset: {
         position: 'absolute',
-        bottom: UnistylesRuntime.insets.bottom,
+        bottom: runtime.insets.bottom,
         left: 0,
         right: 0,
         height: 1,
@@ -246,15 +246,15 @@ const stylesheet = createStyleSheet(theme => ({
         position: 'absolute',
         top: 0,
         bottom: 0,
-        left: UnistylesRuntime.insets.left,
+        left: runtime.insets.left,
         width: 1,
         backgroundColor: theme.colors.accent
     },
     rightInset: {
         position: 'absolute',
         top: 0,
         bottom: 0,
-        right: UnistylesRuntime.insets.right,
+        right: runtime.insets.right,
         width: 1,
         backgroundColor: theme.colors.accent
     }

examples/expo/src/examples/RuntimeWithStyleSheetScreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { View, Text } from 'react-native'
-import { createStyleSheet, useStyles, UnistylesRuntime } from 'react-native-unistyles'
+import { createStyleSheet, useStyles } from 'react-native-unistyles'
 import { DemoScreen } from '../components'
 
 export const RuntimeWithStyleSheetScreen: React.FunctionComponent = () => {
@@ -25,7 +25,7 @@ export const RuntimeWithStyleSheetScreen: React.FunctionComponent = () => {
     )
 }
 
-const stylesheet = createStyleSheet(theme => ({
+const stylesheet = createStyleSheet((theme, runtime) => ({
     container: {
         flex: 1,
         paddingTop: 50,
@@ -41,9 +41,9 @@ const stylesheet = createStyleSheet(theme => ({
         alignItems: 'center',
         padding: 20,
         marginTop: 50,
-        width: UnistylesRuntime.screen.width / 2,
-        height: UnistylesRuntime.screen.height / 2,
-        backgroundColor: UnistylesRuntime.orientation === 'portrait'
+        width: runtime.screen.width / 2,
+        height: runtime.screen.height / 2,
+        backgroundColor: runtime.orientation === 'portrait'
             ? theme.colors.accent
             : theme.colors.oak
     }

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/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>

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

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