react-native-unistyles 2.0.0-alpha.4 → 2.0.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/cxx/UnistylesRuntime.cpp +262 -0
  2. package/cxx/UnistylesRuntime.h +61 -0
  3. package/ios/UnistylesModule.mm +8 -3
  4. package/lib/commonjs/Unistyles.js +1 -1
  5. package/lib/commonjs/Unistyles.js.map +1 -1
  6. package/lib/commonjs/UnistylesEngine.js +9 -5
  7. package/lib/commonjs/UnistylesEngine.js.map +1 -1
  8. package/lib/commonjs/createStyleSheet.js.map +1 -1
  9. package/lib/commonjs/types/cxx.js +1 -2
  10. package/lib/commonjs/types/cxx.js.map +1 -1
  11. package/lib/commonjs/useStyles.js +0 -2
  12. package/lib/commonjs/useStyles.js.map +1 -1
  13. package/lib/commonjs/useUnistyles.js +9 -15
  14. package/lib/commonjs/useUnistyles.js.map +1 -1
  15. package/lib/commonjs/utils/breakpoints.js +23 -70
  16. package/lib/commonjs/utils/breakpoints.js.map +1 -1
  17. package/lib/commonjs/utils/common.js +8 -1
  18. package/lib/commonjs/utils/common.js.map +1 -1
  19. package/lib/commonjs/utils/index.js +7 -0
  20. package/lib/commonjs/utils/index.js.map +1 -1
  21. package/lib/commonjs/utils/mediaQueries.js +58 -149
  22. package/lib/commonjs/utils/mediaQueries.js.map +1 -1
  23. package/lib/commonjs/utils/styles.js +11 -51
  24. package/lib/commonjs/utils/styles.js.map +1 -1
  25. package/lib/module/Unistyles.js +2 -2
  26. package/lib/module/Unistyles.js.map +1 -1
  27. package/lib/module/UnistylesEngine.js +7 -3
  28. package/lib/module/UnistylesEngine.js.map +1 -1
  29. package/lib/module/createStyleSheet.js.map +1 -1
  30. package/lib/module/types/cxx.js +1 -2
  31. package/lib/module/types/cxx.js.map +1 -1
  32. package/lib/module/useStyles.js +0 -3
  33. package/lib/module/useStyles.js.map +1 -1
  34. package/lib/module/useUnistyles.js +9 -15
  35. package/lib/module/useUnistyles.js.map +1 -1
  36. package/lib/module/utils/breakpoints.js +24 -71
  37. package/lib/module/utils/breakpoints.js.map +1 -1
  38. package/lib/module/utils/common.js +7 -0
  39. package/lib/module/utils/common.js.map +1 -1
  40. package/lib/module/utils/index.js +1 -1
  41. package/lib/module/utils/index.js.map +1 -1
  42. package/lib/module/utils/mediaQueries.js +58 -149
  43. package/lib/module/utils/mediaQueries.js.map +1 -1
  44. package/lib/module/utils/styles.js +10 -51
  45. package/lib/module/utils/styles.js.map +1 -1
  46. package/lib/typescript/src/Unistyles.d.ts +2 -2
  47. package/lib/typescript/src/Unistyles.d.ts.map +1 -1
  48. package/lib/typescript/src/UnistylesEngine.d.ts +4 -1
  49. package/lib/typescript/src/UnistylesEngine.d.ts.map +1 -1
  50. package/lib/typescript/src/UnistylesRuntime.d.ts +2 -2
  51. package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -1
  52. package/lib/typescript/src/createStyleSheet.d.ts +2 -5
  53. package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
  54. package/lib/typescript/src/global.d.ts +2 -1
  55. package/lib/typescript/src/global.d.ts.map +1 -1
  56. package/lib/typescript/src/types/breakpoints.d.ts +2 -1
  57. package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
  58. package/lib/typescript/src/types/core.d.ts +18 -16
  59. package/lib/typescript/src/types/core.d.ts.map +1 -1
  60. package/lib/typescript/src/types/cxx.d.ts +15 -14
  61. package/lib/typescript/src/types/cxx.d.ts.map +1 -1
  62. package/lib/typescript/src/types/index.d.ts +1 -1
  63. package/lib/typescript/src/types/index.d.ts.map +1 -1
  64. package/lib/typescript/src/types/mediaQueries.d.ts +5 -3
  65. package/lib/typescript/src/types/mediaQueries.d.ts.map +1 -1
  66. package/lib/typescript/src/useStyles.d.ts +2 -4
  67. package/lib/typescript/src/useStyles.d.ts.map +1 -1
  68. package/lib/typescript/src/useUnistyles.d.ts +3 -1
  69. package/lib/typescript/src/useUnistyles.d.ts.map +1 -1
  70. package/lib/typescript/src/utils/breakpoints.d.ts +2 -60
  71. package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
  72. package/lib/typescript/src/utils/common.d.ts +7 -0
  73. package/lib/typescript/src/utils/common.d.ts.map +1 -1
  74. package/lib/typescript/src/utils/index.d.ts +1 -1
  75. package/lib/typescript/src/utils/index.d.ts.map +1 -1
  76. package/lib/typescript/src/utils/mediaQueries.d.ts +8 -127
  77. package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -1
  78. package/lib/typescript/src/utils/styles.d.ts +1 -46
  79. package/lib/typescript/src/utils/styles.d.ts.map +1 -1
  80. package/package.json +10 -1
  81. package/src/Unistyles.ts +3 -3
  82. package/src/UnistylesEngine.ts +12 -3
  83. package/src/createStyleSheet.ts +2 -5
  84. package/src/global.ts +2 -1
  85. package/src/types/breakpoints.ts +6 -3
  86. package/src/types/core.ts +25 -22
  87. package/src/types/cxx.ts +17 -16
  88. package/src/types/index.ts +1 -1
  89. package/src/types/mediaQueries.ts +9 -4
  90. package/src/useStyles.ts +5 -8
  91. package/src/useUnistyles.ts +12 -24
  92. package/src/utils/breakpoints.ts +31 -74
  93. package/src/utils/common.ts +8 -0
  94. package/src/utils/index.ts +1 -1
  95. package/src/utils/mediaQueries.ts +105 -154
  96. package/src/utils/styles.ts +13 -55
package/src/Unistyles.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import { UnistylesModule } from './UnistylesModule'
2
2
  import { UnistylesRuntime } from './UnistylesRuntime'
3
- import { UnistylesEngine } from './UnistylesEngine'
3
+ import { UnistylesBuiltInEngine } from './UnistylesEngine'
4
4
  import { UnistyleRegistry } from './UnistyleRegistry'
5
5
  import type { UnistylesBridge } from './types'
6
6
  import { UnistylesError } from './types'
7
7
 
8
8
  class Unistyles {
9
9
  private _runtime: UnistylesRuntime
10
- private _engine: UnistylesEngine
10
+ private _engine: UnistylesBuiltInEngine
11
11
  private _registry: UnistyleRegistry
12
12
  private _bridge: UnistylesBridge
13
13
 
@@ -22,7 +22,7 @@ class Unistyles {
22
22
  this._bridge = global.__UNISTYLES__ as UnistylesBridge
23
23
  this._registry = new UnistyleRegistry(this._bridge)
24
24
  this._runtime = new UnistylesRuntime(this._bridge, this._registry)
25
- this._engine = new UnistylesEngine(this._registry, this._runtime)
25
+ this._engine = new UnistylesBuiltInEngine(this._registry, this._runtime)
26
26
  }
27
27
 
28
28
  public get registry() {
@@ -1,14 +1,23 @@
1
1
  import type { UnistyleRegistry } from './UnistyleRegistry'
2
2
  import type { UnistylesRuntime } from './UnistylesRuntime'
3
+ import { getKeyForCustomMediaQuery } from './utils'
4
+ import type { UnistylesEngine, NestedKeys } from './types'
3
5
 
4
- // todo implement engine
5
- export class UnistylesEngine {
6
- // @ts-ignore
6
+ export class UnistylesBuiltInEngine implements UnistylesEngine {
7
7
  constructor(private registry: UnistyleRegistry, private runtime: UnistylesRuntime) {
8
8
  this.registry = registry
9
9
  this.runtime = runtime
10
10
  }
11
11
 
12
+ public isMediaQuery = (key: string) => {
13
+ const regex = /(:w|:h)/
14
+
15
+ return key.length > 0 && regex.test(key)
16
+ }
17
+
18
+ public didMatchMediaQuery = (keys: NestedKeys) =>
19
+ getKeyForCustomMediaQuery(keys, this.runtime.screen, this.registry.breakpoints)
20
+
12
21
  // UnistylesEngine.parseStyleSheet
13
22
  // UnistylesEngine.parseStyle
14
23
  // UnistylesEngine.proxify
@@ -1,9 +1,6 @@
1
- import type { CustomNamedStyles } from './types'
2
- import type { UnistylesThemes } from './global'
1
+ import type { CustomNamedStyles, UnistylesTheme } from './types'
3
2
 
4
- type T = UnistylesThemes[keyof UnistylesThemes]
5
-
6
- export const createStyleSheet = <S extends CustomNamedStyles<S>, X>(styles: S | CustomNamedStyles<S> | X | ((theme: T) => X | CustomNamedStyles<X>)): S | X => {
3
+ export const createStyleSheet = <S, X>(styles: S | CustomNamedStyles<S> | X | ((theme: UnistylesTheme) => X | CustomNamedStyles<X>)): S | X => {
7
4
  if (typeof styles === 'function') {
8
5
  return styles as X
9
6
  }
package/src/global.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export interface UnistylesThemes {}
2
2
  export interface UnistylesBreakpoints {
3
- default?: 0
3
+ landscape?: number,
4
+ portrait?: number,
4
5
  }
@@ -1,3 +1,4 @@
1
+ import type { OpaqueColorValue } from 'react-native'
1
2
  import type { UnistylesBreakpoints } from '../global'
2
3
  import type { MediaQueries } from './mediaQueries'
3
4
 
@@ -25,7 +26,9 @@ export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBrea
25
26
  export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
26
27
  ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
27
28
  : T extends object
28
- ? T extends Record<string, infer _V>
29
- ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
30
- : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
29
+ ? T extends OpaqueColorValue
30
+ ? string
31
+ : T extends Record<string, infer _V>
32
+ ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
33
+ : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
31
34
  : T
package/src/types/core.ts CHANGED
@@ -15,7 +15,7 @@ import type {
15
15
  } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
16
16
  import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
17
17
  import type { MediaQueries } from './mediaQueries'
18
- import type { UnistylesBreakpoints } from '../global'
18
+ import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
19
19
 
20
20
  type ShadowOffset = {
21
21
  width: number,
@@ -37,37 +37,40 @@ type TransformStyles =
37
37
  & SkewYTransform
38
38
  & MatrixTransform
39
39
 
40
- type UnistyleNested<B> = {
41
- shadowOffset?: DeepUniStyle<ShadowOffset, B>,
42
- textShadowOffset?: DeepUniStyle<ShadowOffset, B>,
43
- transform?: Array<DeepUniStyle<TransformStyles, B>>
40
+ type UnistyleNested = {
41
+ shadowOffset?: DeepUniStyle<ShadowOffset>,
42
+ textShadowOffset?: DeepUniStyle<ShadowOffset>,
43
+ transform?: Array<DeepUniStyle<TransformStyles>>
44
44
  }
45
45
 
46
- type UniStyle<V, B> = {
47
- [innerKey in keyof B]?: V
46
+ type UniStyle<V> = {
47
+ [innerKey in keyof UnistylesBreakpoints]: V
48
48
  } | {
49
- [innerKey in MediaQueries]?: V
50
- } | V
49
+ [innerKey in MediaQueries]: V
50
+ }
51
51
 
52
- type DeepUniStyle<T, B> = {
53
- [K in keyof T]?: UniStyle<T[K], B>
52
+ type DeepUniStyle<T> = {
53
+ [K in keyof T]?: UniStyle<T[K]> | T[K]
54
54
  }
55
55
 
56
56
  // these props are treated differently to nest breakpoints and media queries
57
57
  type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
58
58
 
59
- type UnistyleView<B> = DeepUniStyle<Omit<ViewStyle, NestedTypes>, B>
60
- type UnistyleText<B> = DeepUniStyle<Omit<TextStyle, NestedTypes>, B>
61
- type UnistyleImage<B> = DeepUniStyle<Omit<ImageStyle, NestedTypes>, B>
59
+ type UnistyleView = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
60
+ type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
61
+ type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
62
62
 
63
- export type StaticStyles<B> =
64
- | UnistyleView<B>
65
- | UnistyleText<B>
66
- | UnistyleImage<B>
67
- & UnistyleNested<B>
63
+ export type StaticStyles =
64
+ | UnistyleView
65
+ | UnistyleText
66
+ | UnistyleImage
67
+ & UnistyleNested
68
68
 
69
69
  export type CustomNamedStyles<T> = {
70
- [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<UnistylesBreakpoints>
71
- ? (...args: A) => StaticStyles<UnistylesBreakpoints>
72
- : StaticStyles<UnistylesBreakpoints>
70
+ [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
71
+ ? (...args: A) => StaticStyles
72
+ : StaticStyles
73
73
  }
74
+
75
+ export type NestedKeys = Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
76
+ export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
package/src/types/cxx.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
2
+ import type { ScreenSize } from './breakpoints'
3
+ import type { NestedKeys } from './core'
2
4
 
5
+ export type Optional<T> = T | undefined
3
6
  export type Nullable<T> = T | null
4
- export type ColorSchemeName = 'light' | 'dark' | undefined
7
+ export type ColorSchemeName = Optional<'light' | 'dark'>
5
8
 
6
9
  export type UnistylesConfig = {
7
10
  adaptiveThemes?: boolean
@@ -34,33 +37,26 @@ export type UnistylesBridge = {
34
37
 
35
38
  export enum CxxUnistylesEventTypes {
36
39
  Theme = 'theme',
37
- Size = 'size',
38
- Breakpoint = 'breakpoint'
40
+ Layout = 'layout'
39
41
  }
40
42
 
41
- export type CxxUnistylesThemeEvent = {
43
+ export type UnistylesThemeEvent = {
42
44
  type: CxxUnistylesEventTypes.Theme,
43
45
  payload: {
44
46
  themeName: keyof UnistylesThemes
45
47
  }
46
48
  }
47
49
 
48
- export type CxxUnistylesSizeEvent = {
49
- type: CxxUnistylesEventTypes.Size,
50
+ export type UnistylesMobileLayoutEvent = {
51
+ type: CxxUnistylesEventTypes.Layout,
50
52
  payload: {
51
- width: number,
52
- height: number
53
+ screen: ScreenSize,
54
+ breakpoint: keyof UnistylesBreakpoints,
55
+ orientation: ScreenOrientation
53
56
  }
54
57
  }
55
58
 
56
- export type CxxUnistylesBreakpointEvent = {
57
- type: CxxUnistylesEventTypes.Breakpoint,
58
- payload: {
59
- breakpoint: keyof UnistylesBreakpoints
60
- }
61
- }
62
-
63
- export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent
59
+ export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent
64
60
 
65
61
  export enum UnistylesError {
66
62
  RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
@@ -70,3 +66,8 @@ export enum UnistylesError {
70
66
  BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
71
67
  BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
72
68
  }
69
+
70
+ export interface UnistylesEngine {
71
+ isMediaQuery(key: string): boolean,
72
+ didMatchMediaQuery(keys: NestedKeys): Optional<string>,
73
+ }
@@ -1,6 +1,6 @@
1
1
  export * from './normalizer'
2
2
  export * from './cxx'
3
- export type { CustomNamedStyles } from './core'
3
+ export type { CustomNamedStyles, NestedKeys, UnistylesTheme } from './core'
4
4
  export type { MediaQueries } from './mediaQueries'
5
5
  export type {
6
6
  ScreenSize,
@@ -1,9 +1,14 @@
1
1
  type Optional<TOptional extends string> = TOptional | ''
2
2
  type Separator = ',' | ', '
3
- // this is super weird, but number passes empty string and bigint does not
4
- type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`
5
- type WidthMediaQuery = `:w${MediaQuery}`
6
- type HeightMediaQuery = `:h${MediaQuery}`
3
+ type OpeningBracket = '(' | '['
4
+ type ClosingBracket = ')' | ']'
5
+
6
+ type NumericMediaQuery =
7
+ | `${OpeningBracket}${Separator}${bigint}${ClosingBracket}`
8
+ | `${OpeningBracket}${bigint}${Optional<`${Separator}${bigint}`>}${ClosingBracket}`
9
+
10
+ type WidthMediaQuery = `:w${NumericMediaQuery}`
11
+ type HeightMediaQuery = `:h${NumericMediaQuery}`
7
12
 
8
13
  export type MediaQueries =
9
14
  | `${WidthMediaQuery}${Optional<HeightMediaQuery>}`
package/src/useStyles.ts CHANGED
@@ -3,12 +3,9 @@ import { StyleSheet } from 'react-native'
3
3
  import { parseStyle, proxifyFunction } from './utils'
4
4
  import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
5
5
  import { useUnistyles } from './useUnistyles'
6
- import type { UnistylesThemes } from './global'
6
+ import type { UnistylesTheme } from './types'
7
7
 
8
- // todo types
9
- type T = UnistylesThemes[keyof UnistylesThemes]
10
-
11
- export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
8
+ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>) => {
12
9
  const { theme, breakpoint, screenSize } = useUnistyles()
13
10
 
14
11
  if (!stylesheet) {
@@ -20,7 +17,7 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
20
17
  }
21
18
 
22
19
  const parsedStyles = useMemo(() => typeof stylesheet === 'function'
23
- ? stylesheet(theme!)
20
+ ? stylesheet(theme)
24
21
  : stylesheet, [theme, stylesheet])
25
22
 
26
23
  const dynamicStyleSheet = useMemo(() => Object
@@ -31,13 +28,13 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
31
28
  if (typeof value === 'function') {
32
29
  return {
33
30
  ...acc,
34
- [key]: proxifyFunction(value, breakpoint!, screenSize)
31
+ [key]: proxifyFunction(value, breakpoint, screenSize)
35
32
  }
36
33
  }
37
34
 
38
35
  return StyleSheet.create({
39
36
  ...acc,
40
- [key]: parseStyle<ST>(style, breakpoint!, screenSize)
37
+ [key]: parseStyle<ST>(style, breakpoint, screenSize)
41
38
  })
42
39
  }, {} as ST), [breakpoint, screenSize, parsedStyles])
43
40
 
@@ -1,22 +1,18 @@
1
1
  import { NativeEventEmitter, NativeModules } from 'react-native'
2
2
  import { useEffect, useState } from 'react'
3
- import type {
4
- CxxUnistylesBreakpointEvent,
5
- CxxUnistylesSizeEvent,
6
- CxxUnistylesThemeEvent,
7
- UnistylesEvents
8
- } from './types'
9
- import { CxxUnistylesEventTypes } from './types'
3
+ import type { UnistylesThemeEvent, UnistylesMobileLayoutEvent, UnistylesEvents } from './types'
4
+ import { CxxUnistylesEventTypes, ScreenOrientation } from './types'
10
5
  import { unistyles } from './Unistyles'
11
6
 
12
7
  const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
13
8
 
14
9
  export const useUnistyles = () => {
10
+ const [orientation, setOrientation] = useState<ScreenOrientation>(unistyles.runtime.orientation)
15
11
  const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
16
12
  const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
17
13
  const [screenSize, setScreenSize] = useState({
18
- width: 0,
19
- height: 0
14
+ width: unistyles.runtime.screen.width,
15
+ height: unistyles.runtime.screen.height
20
16
  })
21
17
 
22
18
  useEffect(() => {
@@ -25,27 +21,18 @@ export const useUnistyles = () => {
25
21
  (event: UnistylesEvents) => {
26
22
  switch (event.type) {
27
23
  case CxxUnistylesEventTypes.Theme: {
28
- const themeEvent = event as CxxUnistylesThemeEvent
24
+ const themeEvent = event as UnistylesThemeEvent
29
25
 
30
26
  setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
31
27
 
32
28
  return
33
29
  }
34
- // this event is not available on mobile
35
- case CxxUnistylesEventTypes.Size: {
36
- const sizeEvent = event as CxxUnistylesSizeEvent
30
+ case CxxUnistylesEventTypes.Layout: {
31
+ const layoutEvent = event as UnistylesMobileLayoutEvent
37
32
 
38
- setScreenSize({
39
- width: sizeEvent.payload.width,
40
- height: sizeEvent.payload.height
41
- })
42
-
43
- return
44
- }
45
- case CxxUnistylesEventTypes.Breakpoint: {
46
- const breakpointEvent = event as CxxUnistylesBreakpointEvent
47
-
48
- setBreakpoint(breakpointEvent.payload.breakpoint)
33
+ setBreakpoint(layoutEvent.payload.breakpoint)
34
+ setOrientation(layoutEvent.payload.orientation)
35
+ setScreenSize(layoutEvent.payload.screen)
49
36
 
50
37
  return
51
38
  }
@@ -60,6 +47,7 @@ export const useUnistyles = () => {
60
47
 
61
48
  return {
62
49
  theme,
50
+ orientation,
63
51
  breakpoint,
64
52
  screenSize
65
53
  }
@@ -1,28 +1,9 @@
1
1
  import { unistyles } from '../Unistyles'
2
- import { throwError } from './common'
3
- import type { ScreenSize, MediaQueries } from '../types'
4
- import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
2
+ import { isMobile, Orientation, throwError } from './common'
3
+ import type { MediaQueries } from '../types'
4
+ import { ScreenOrientation } from '../types'
5
5
  import type { UnistylesBreakpoints } from '../global'
6
6
 
7
- /**
8
- * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
9
- *
10
- * This function takes an object where keys represent breakpoint names and values are numeric.
11
- * It returns a new object with the same keys but sorted based on their corresponding numeric values.
12
- * Additionally, it validates that:
13
- * 1. The first breakpoint starts with a value of 0.
14
- * 2. No duplicate breakpoint values exist.
15
- *
16
- * If the validation fails, appropriate error messages are logged to the console.
17
- *
18
- * @template B - An object type where keys are strings and values are numbers.
19
- * @param {B} breakpoints - The breakpoints object to be sorted and validated.
20
- * @returns {B} A new object with sorted and validated breakpoints.
21
- *
22
- * @example
23
- * const input = { md: 768, lg: 1024, sm: 0 }
24
- * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
25
- */
26
7
  export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
27
8
  const sortedPairs = Object
28
9
  .entries(breakpoints)
@@ -48,21 +29,6 @@ export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): U
48
29
  return sortedBreakpoints
49
30
  }
50
31
 
51
- /**
52
- * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
53
- *
54
- * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
55
- * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
56
- *
57
- * @template B - An object type where keys are strings and values are numbers representing screen widths.
58
- * @param {number} width - The screen width to determine the breakpoint for.
59
- * @param breakpointEntries - sorted pairs of breakpoints
60
- * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
61
- *
62
- * @example
63
- * const breakpoints = { sm: 0, md: 768, lg: 1024 }
64
- * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
65
- */
66
32
  export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
67
33
  const [key] = breakpointEntries
68
34
  .find(([, value], index, otherBreakpoints) => {
@@ -79,58 +45,49 @@ export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: A
79
45
  return key
80
46
  }
81
47
 
82
- /**
83
- * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
84
- *
85
- * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
86
- * If no custom media query matches, the function then checks for a direct breakpoint match.
87
- * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
88
- *
89
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
90
- *
91
- * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
92
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
93
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
94
- * @param breakpointPairs - sorted pairs of breakpoints
95
- *
96
- * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
97
- *
98
- * @example
99
- *
100
- * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
101
- * const screenSize = { width: 250, height: 400 }
102
- * const breakpoints = { sm: 300, md: 600, lg: 900 }
103
- *
104
- * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
105
- */
106
- export const getValueForBreakpoint = (
107
- value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>,
108
- breakpoint: keyof UnistylesBreakpoints,
109
- screenSize: ScreenSize
110
- ): string | number | undefined => {
48
+ export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>): string | number | undefined => {
111
49
  // the highest priority is for custom media queries
112
50
  const customMediaQueries = Object
113
51
  .entries(value)
114
- .filter(([key]) => isMediaQuery(key))
115
- const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
52
+ .filter(([key]) => unistyles.engine.isMediaQuery(key)) as Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
53
+ // const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
54
+ const customMediaQueryKey = unistyles.engine.didMatchMediaQuery(customMediaQueries) as keyof typeof value
116
55
 
117
56
  if (customMediaQueryKey && customMediaQueryKey in value) {
118
57
  return value[customMediaQueryKey]
119
58
  }
120
59
 
121
- // if no custom media query, or didn't match, proceed with defined breakpoints
122
- const unifiedKey = breakpoint?.toLowerCase() as keyof typeof value
123
- const directBreakpoint = value[unifiedKey]
60
+ // at this point user didn't use custom media queries (:w, :h)
61
+ // check if user defined any breakpoints
62
+ const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0
63
+
64
+ // if not then we can fallback to horizontal and portrait (mobile only)
65
+ if (!hasBreakpoints && isMobile && (Orientation.Landscape in value || Orientation.Portrait in value)) {
66
+ return value[
67
+ unistyles.runtime.orientation === ScreenOrientation.Portrait
68
+ ? Orientation.Portrait
69
+ : Orientation.Landscape
70
+ ]
71
+ }
72
+
73
+ const breakpoint = unistyles.runtime.breakpoint
74
+
75
+ if (!breakpoint) {
76
+ return undefined
77
+ }
78
+
79
+ // if user defined breakpoints, then we look for the valid one
80
+ const directBreakpoint = value[breakpoint]
124
81
 
125
82
  // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
126
- if (directBreakpoint || (unifiedKey in value)) {
83
+ if (directBreakpoint || (breakpoint in value)) {
127
84
  return directBreakpoint
128
85
  }
129
86
 
130
- // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
87
+ // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
131
88
  const breakpointPairs = unistyles.runtime.sortedBreakpoints
132
89
  const currentBreakpoint = breakpointPairs
133
- .findIndex(([key]) => key === unifiedKey)
90
+ .findIndex(([key]) => key === breakpoint)
134
91
 
135
92
  const availableBreakpoints = breakpointPairs
136
93
  .filter(([key], index) => index < currentBreakpoint && key && key in value)
@@ -8,5 +8,13 @@ export const warn = (message: string) => {
8
8
  console.warn(`🦄 [react-native-unistyles]: ${message}`)
9
9
  }
10
10
 
11
+ export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
11
12
  export const isWeb = Platform.OS === 'web'
13
+ export const isIOS = Platform.OS === 'ios'
14
+ export const isAndroid = Platform.OS === 'android'
12
15
  export const isServer = typeof window === 'undefined'
16
+
17
+ export const Orientation = {
18
+ Landscape: 'landscape',
19
+ Portrait: 'portrait'
20
+ } as const
@@ -2,7 +2,7 @@ export { normalizeStyles } from './normalizeStyles'
2
2
  export * from './normalizer'
3
3
  export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
4
4
  export { proxifyFunction, parseStyle } from './styles'
5
- export { isServer } from './common'
5
+ export { isServer, Orientation } from './common'
6
6
  export {
7
7
  extractValues,
8
8
  getKeyForCustomMediaQuery,