react-native-unistyles 2.0.0-alpha.3 → 2.0.0-alpha.5

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 (102) hide show
  1. package/ios/UnistylesHelpers.h +4 -0
  2. package/ios/UnistylesHelpers.mm +20 -0
  3. package/ios/UnistylesModule.h +1 -3
  4. package/ios/UnistylesModule.mm +62 -67
  5. package/lib/commonjs/UnistyleRegistry.js +12 -1
  6. package/lib/commonjs/UnistyleRegistry.js.map +1 -1
  7. package/lib/commonjs/UnistylesRuntime.js +5 -2
  8. package/lib/commonjs/UnistylesRuntime.js.map +1 -1
  9. package/lib/commonjs/hooks/useDimensions.web.js +7 -5
  10. package/lib/commonjs/hooks/useDimensions.web.js.map +1 -1
  11. package/lib/commonjs/index.js +2 -1
  12. package/lib/commonjs/index.js.map +1 -1
  13. package/lib/commonjs/types/cxx.js +5 -2
  14. package/lib/commonjs/types/cxx.js.map +1 -1
  15. package/lib/commonjs/useInitialTheme.js +1 -1
  16. package/lib/commonjs/useInitialTheme.js.map +1 -1
  17. package/lib/commonjs/useStyles.js.map +1 -1
  18. package/lib/commonjs/useUnistyles.js +9 -15
  19. package/lib/commonjs/useUnistyles.js.map +1 -1
  20. package/lib/commonjs/utils/breakpoints.js +12 -2
  21. package/lib/commonjs/utils/breakpoints.js.map +1 -1
  22. package/lib/commonjs/utils/common.js +6 -1
  23. package/lib/commonjs/utils/common.js.map +1 -1
  24. package/lib/commonjs/utils/index.js +7 -0
  25. package/lib/commonjs/utils/index.js.map +1 -1
  26. package/lib/commonjs/utils/mediaQueries.js +9 -2
  27. package/lib/commonjs/utils/mediaQueries.js.map +1 -1
  28. package/lib/module/UnistyleRegistry.js +12 -1
  29. package/lib/module/UnistyleRegistry.js.map +1 -1
  30. package/lib/module/UnistylesRuntime.js +5 -2
  31. package/lib/module/UnistylesRuntime.js.map +1 -1
  32. package/lib/module/hooks/useDimensions.web.js +8 -6
  33. package/lib/module/hooks/useDimensions.web.js.map +1 -1
  34. package/lib/module/index.js +1 -0
  35. package/lib/module/index.js.map +1 -1
  36. package/lib/module/types/cxx.js +5 -2
  37. package/lib/module/types/cxx.js.map +1 -1
  38. package/lib/module/useInitialTheme.js +2 -2
  39. package/lib/module/useInitialTheme.js.map +1 -1
  40. package/lib/module/useStyles.js.map +1 -1
  41. package/lib/module/useUnistyles.js +9 -15
  42. package/lib/module/useUnistyles.js.map +1 -1
  43. package/lib/module/utils/breakpoints.js +13 -3
  44. package/lib/module/utils/breakpoints.js.map +1 -1
  45. package/lib/module/utils/common.js +5 -0
  46. package/lib/module/utils/common.js.map +1 -1
  47. package/lib/module/utils/index.js +1 -1
  48. package/lib/module/utils/index.js.map +1 -1
  49. package/lib/module/utils/mediaQueries.js +9 -2
  50. package/lib/module/utils/mediaQueries.js.map +1 -1
  51. package/lib/typescript/src/UnistyleRegistry.d.ts +2 -0
  52. package/lib/typescript/src/UnistyleRegistry.d.ts.map +1 -1
  53. package/lib/typescript/src/UnistylesRuntime.d.ts +3 -39
  54. package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -1
  55. package/lib/typescript/src/global.d.ts +2 -0
  56. package/lib/typescript/src/global.d.ts.map +1 -1
  57. package/lib/typescript/src/hooks/useDimensions.web.d.ts.map +1 -1
  58. package/lib/typescript/src/index.d.ts +1 -0
  59. package/lib/typescript/src/index.d.ts.map +1 -1
  60. package/lib/typescript/src/types/cxx.d.ts +15 -15
  61. package/lib/typescript/src/types/cxx.d.ts.map +1 -1
  62. package/lib/typescript/src/useStyles.d.ts +3 -39
  63. package/lib/typescript/src/useStyles.d.ts.map +1 -1
  64. package/lib/typescript/src/useUnistyles.d.ts +4 -38
  65. package/lib/typescript/src/useUnistyles.d.ts.map +1 -1
  66. package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
  67. package/lib/typescript/src/utils/common.d.ts +5 -0
  68. package/lib/typescript/src/utils/common.d.ts.map +1 -1
  69. package/lib/typescript/src/utils/index.d.ts +1 -1
  70. package/lib/typescript/src/utils/index.d.ts.map +1 -1
  71. package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -1
  72. package/package.json +12 -13
  73. package/react-native-unistyles.podspec +2 -1
  74. package/src/UnistyleRegistry.ts +16 -1
  75. package/src/UnistylesRuntime.ts +6 -2
  76. package/src/global.ts +4 -1
  77. package/src/hooks/useDimensions.web.ts +9 -6
  78. package/src/index.ts +2 -0
  79. package/src/types/cxx.ts +18 -17
  80. package/src/useInitialTheme.ts +2 -2
  81. package/src/useStyles.ts +2 -2
  82. package/src/useUnistyles.ts +12 -24
  83. package/src/utils/breakpoints.ts +18 -4
  84. package/src/utils/common.ts +6 -0
  85. package/src/utils/index.ts +1 -1
  86. package/src/utils/mediaQueries.ts +18 -6
  87. package/ios/UnistylesRuntime.h +0 -48
  88. package/ios/UnistylesRuntime.mm +0 -228
  89. package/lib/typescript/examples/expo/src/App.d.ts +0 -3
  90. package/lib/typescript/examples/expo/src/App.d.ts.map +0 -1
  91. package/lib/typescript/examples/expo/src/examples/Cxx.d.ts +0 -3
  92. package/lib/typescript/examples/expo/src/examples/Cxx.d.ts.map +0 -1
  93. package/lib/typescript/examples/expo/src/examples/index.d.ts +0 -2
  94. package/lib/typescript/examples/expo/src/examples/index.d.ts.map +0 -1
  95. package/lib/typescript/examples/expo/src/index.d.ts +0 -2
  96. package/lib/typescript/examples/expo/src/index.d.ts.map +0 -1
  97. package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts +0 -8
  98. package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts.map +0 -1
  99. package/lib/typescript/examples/expo/src/styles/index.d.ts +0 -16
  100. package/lib/typescript/examples/expo/src/styles/index.d.ts.map +0 -1
  101. package/lib/typescript/examples/expo/src/styles/theme.d.ts +0 -40
  102. package/lib/typescript/examples/expo/src/styles/theme.d.ts.map +0 -1
@@ -1,4 +1,5 @@
1
1
  import type { UnistylesThemes, UnistylesBreakpoints } from '../global';
2
+ import type { ScreenSize } from './breakpoints';
2
3
  export type Nullable<T> = T | null;
3
4
  export type ColorSchemeName = 'light' | 'dark' | undefined;
4
5
  export type UnistylesConfig = {
@@ -12,7 +13,7 @@ export type UnistylesBridge = {
12
13
  screenWidth: number;
13
14
  screenHeight: number;
14
15
  hasAdaptiveThemes: boolean;
15
- theme: keyof UnistylesThemes;
16
+ themeName: keyof UnistylesThemes;
16
17
  breakpoint: keyof UnistylesBreakpoints;
17
18
  colorScheme: ColorSchemeName;
18
19
  sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>;
@@ -20,34 +21,33 @@ export type UnistylesBridge = {
20
21
  useBreakpoints(breakpoints: UnistylesBreakpoints): void;
21
22
  useTheme(name: keyof UnistylesThemes): void;
22
23
  useAdaptiveThemes(enable: boolean): void;
24
+ unregister(): void;
23
25
  };
24
26
  export declare enum CxxUnistylesEventTypes {
25
27
  Theme = "theme",
26
- Size = "size",
27
- Breakpoint = "breakpoint"
28
+ Layout = "layout"
28
29
  }
29
- export type CxxUnistylesThemeEvent = {
30
+ export type UnistylesThemeEvent = {
30
31
  type: CxxUnistylesEventTypes.Theme;
31
32
  payload: {
32
33
  themeName: keyof UnistylesThemes;
33
34
  };
34
35
  };
35
- export type CxxUnistylesSizeEvent = {
36
- type: CxxUnistylesEventTypes.Size;
37
- payload: {
38
- width: number;
39
- height: number;
40
- };
41
- };
42
- export type CxxUnistylesBreakpointEvent = {
43
- type: CxxUnistylesEventTypes.Breakpoint;
36
+ export type UnistylesMobileLayoutEvent = {
37
+ type: CxxUnistylesEventTypes.Layout;
44
38
  payload: {
39
+ screen: ScreenSize;
45
40
  breakpoint: keyof UnistylesBreakpoints;
41
+ orientation: ScreenOrientation;
46
42
  };
47
43
  };
48
- export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent;
44
+ export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent;
49
45
  export declare enum UnistylesError {
50
46
  RuntimeUnavailable = "UNISTYLES_ERROR_RUNTIME_UNAVAILABLE",
51
- ThemeNotFound = "UNISTYLES_ERROR_THEME_NOT_FOUND"
47
+ ThemeNotFound = "UNISTYLES_ERROR_THEME_NOT_FOUND",
48
+ ThemeNotRegistered = "UNISTYLES_ERROR_THEME_NOT_REGISTERED",
49
+ ThemesCannotBeEmpty = "UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY",
50
+ BreakpointsCannotBeEmpty = "UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY",
51
+ BreakpointsMustStartFromZero = "UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO"
52
52
  }
53
53
  //# sourceMappingURL=cxx.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"cxx.d.ts","sourceRoot":"","sources":["../../../../src/types/cxx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAEtE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED,oBAAY,iBAAiB;IACzB,QAAQ,IAAI;IACZ,SAAS,IAAI;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAE1B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,eAAe,CAAC;IAC7B,UAAU,EAAE,MAAM,oBAAoB,CAAC;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,qBAAqB,EAAE,KAAK,CAAC,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAG7G,MAAM,EAAE,KAAK,CAAC,MAAM,eAAe,CAAC,CAAC;IACrC,cAAc,CAAC,WAAW,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxD,QAAQ,CAAC,IAAI,EAAE,MAAM,eAAe,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5C,CAAA;AAED,oBAAY,sBAAsB;IAC9B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,UAAU,eAAe;CAC5B;AAED,MAAM,MAAM,sBAAsB,GAAG;IACjC,IAAI,EAAE,sBAAsB,CAAC,KAAK,CAAC;IACnC,OAAO,EAAE;QACL,SAAS,EAAE,MAAM,eAAe,CAAA;KACnC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,EAAE,sBAAsB,CAAC,IAAI,CAAC;IAClC,OAAO,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAA;KACjB,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACtC,IAAI,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACxC,OAAO,EAAE;QACL,UAAU,EAAE,MAAM,oBAAoB,CAAA;KACzC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,2BAA2B,CAAA;AAE1G,oBAAY,cAAc;IACtB,kBAAkB,wCAAwC;IAC1D,aAAa,oCAAoC;CACpD"}
1
+ {"version":3,"file":"cxx.d.ts","sourceRoot":"","sources":["../../../../src/types/cxx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED,oBAAY,iBAAiB;IACzB,QAAQ,IAAI;IACZ,SAAS,IAAI;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAE1B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,MAAM,eAAe,CAAC;IACjC,UAAU,EAAE,MAAM,oBAAoB,CAAC;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,qBAAqB,EAAE,KAAK,CAAC,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAG7G,MAAM,EAAE,KAAK,CAAC,MAAM,eAAe,CAAC,CAAC;IACrC,cAAc,CAAC,WAAW,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxD,QAAQ,CAAC,IAAI,EAAE,MAAM,eAAe,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAGzC,UAAU,IAAI,IAAI,CAAA;CACrB,CAAA;AAED,oBAAY,sBAAsB;IAC9B,KAAK,UAAU;IACf,MAAM,WAAW;CACpB;AAED,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,sBAAsB,CAAC,KAAK,CAAC;IACnC,OAAO,EAAE;QACL,SAAS,EAAE,MAAM,eAAe,CAAA;KACnC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACrC,IAAI,EAAE,sBAAsB,CAAC,MAAM,CAAC;IACpC,OAAO,EAAE;QACL,MAAM,EAAE,UAAU,CAAC;QACnB,UAAU,EAAE,MAAM,oBAAoB,CAAC;QACvC,WAAW,EAAE,iBAAiB,CAAA;KACjC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,0BAA0B,CAAA;AAE9E,oBAAY,cAAc;IACtB,kBAAkB,wCAAwC;IAC1D,aAAa,oCAAoC;IACjD,kBAAkB,yCAAyC;IAC3D,mBAAmB,2CAA2C;IAC9D,wBAAwB,gDAAgD;IACxE,4BAA4B,qDAAqD;CACpF"}
@@ -1,45 +1,9 @@
1
1
  import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
2
2
  import type { UnistylesThemes } from './global';
3
3
  type T = UnistylesThemes[keyof UnistylesThemes];
4
- export declare const useStyles: <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
5
- theme: {
6
- colors: {
7
- backgroundColor: string;
8
- typography: string;
9
- accent: string;
10
- barbie: string;
11
- oak: string;
12
- sky: string;
13
- fog: string;
14
- aloes: string;
15
- blood: string;
16
- };
17
- } | {
18
- colors: {
19
- backgroundColor: string;
20
- typography: string;
21
- accent: string;
22
- barbie: string;
23
- oak: string;
24
- sky: string;
25
- fog: string;
26
- aloes: string;
27
- blood: string;
28
- };
29
- } | {
30
- colors: {
31
- backgroundColor: string;
32
- typography: string;
33
- accent: string;
34
- barbie: string;
35
- oak: string;
36
- sky: string;
37
- fog: string;
38
- aloes: string;
39
- blood: string;
40
- };
41
- };
42
- breakpoint: "xs" | "sm" | "md" | "lg" | "xl";
4
+ export declare const useStyles: <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, never> | undefined) => {
5
+ theme: never;
6
+ breakpoint: "landscape" | "portrait";
43
7
  styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST>>;
44
8
  };
45
9
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG/C,KAAK,CAAC,GAAG,eAAe,CAAC,MAAM,eAAe,CAAC,CAAA;AAE/C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCrB,CAAA"}
1
+ {"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG/C,KAAK,CAAC,GAAG,eAAe,CAAC,MAAM,eAAe,CAAC,CAAA;AAE/C,eAAO,MAAM,SAAS;;;;CAsCrB,CAAA"}
@@ -1,42 +1,8 @@
1
+ import { ScreenOrientation } from './types';
1
2
  export declare const useUnistyles: () => {
2
- theme: {
3
- colors: {
4
- backgroundColor: string;
5
- typography: string;
6
- accent: string;
7
- barbie: string;
8
- oak: string;
9
- sky: string;
10
- fog: string;
11
- aloes: string;
12
- blood: string;
13
- };
14
- } | {
15
- colors: {
16
- backgroundColor: string;
17
- typography: string;
18
- accent: string;
19
- barbie: string;
20
- oak: string;
21
- sky: string;
22
- fog: string;
23
- aloes: string;
24
- blood: string;
25
- };
26
- } | {
27
- colors: {
28
- backgroundColor: string;
29
- typography: string;
30
- accent: string;
31
- barbie: string;
32
- oak: string;
33
- sky: string;
34
- fog: string;
35
- aloes: string;
36
- blood: string;
37
- };
38
- };
39
- breakpoint: "xs" | "sm" | "md" | "lg" | "xl";
3
+ theme: never;
4
+ orientation: ScreenOrientation;
5
+ breakpoint: "landscape" | "portrait";
40
6
  screenSize: {
41
7
  width: number;
42
8
  height: number;
@@ -1 +1 @@
1
- {"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAA"}
1
+ {"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKnE,eAAO,MAAM,YAAY;;;;;;;;CA6CxB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAExD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,UACvB,OAAO,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,cACzE,MAAM,oBAAoB,cAC1B,UAAU,KACvB,MAAM,GAAG,MAAM,GAAG,SAgCpB,CAAA"}
1
+ {"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,UACvB,OAAO,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,cACzE,MAAM,oBAAoB,cAC1B,UAAU,KACvB,MAAM,GAAG,MAAM,GAAG,SA6CpB,CAAA"}
@@ -1,5 +1,10 @@
1
1
  export declare const throwError: (message: string) => never;
2
2
  export declare const warn: (message: string) => void;
3
+ export declare const isMobile: boolean;
3
4
  export declare const isWeb: boolean;
4
5
  export declare const isServer: boolean;
6
+ export declare const Orientation: {
7
+ readonly Landscape: "landscape";
8
+ readonly Portrait: "portrait";
9
+ };
5
10
  //# sourceMappingURL=common.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,QAAQ,SAAgC,CAAA"}
1
+ {"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAqD,CAAA;AAC1E,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,QAAQ,SAAgC,CAAA;AAErD,eAAO,MAAM,WAAW;;;CAGd,CAAA"}
@@ -2,6 +2,6 @@ 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 { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
7
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EACH,aAAa,EACb,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EAC5B,MAAM,gBAAgB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EACH,aAAa,EACb,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EAC5B,MAAM,gBAAgB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,CAQ9D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,KAAG,OAc1E,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,KAAG,OAQ/D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,KAAG,OAQjE,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,KAAG,OAQjF,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,iBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cAAc,UAAU,KAAG,MAAM,GAAG,SAevI,CAAA"}
1
+ {"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,CAoB9D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,KAAG,OAc1E,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,KAAG,OAQ/D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,KAAG,OAQjE,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,KAAG,OAQjF,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,iBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cAAc,UAAU,KAAG,MAAM,GAAG,SAevI,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-unistyles",
3
- "version": "2.0.0-alpha.3",
3
+ "version": "2.0.0-alpha.5",
4
4
  "description": "Level up your React Native StyleSheet",
5
5
  "scripts": {
6
6
  "test": "jest",
@@ -41,25 +41,24 @@
41
41
  "registry": "https://registry.npmjs.org/"
42
42
  },
43
43
  "devDependencies": {
44
- "@commitlint/config-conventional": "17.8.0",
44
+ "@commitlint/config-conventional": "18.1.0",
45
45
  "@react-native/eslint-config": "0.74.0",
46
46
  "@react-native/normalize-colors": "0.74.1",
47
47
  "@release-it/conventional-changelog": "7.0.2",
48
48
  "@testing-library/react-hooks": "8.0.1",
49
- "@types/jest": "29.5.6",
50
- "@types/react": "18.2.28",
51
- "@types/react-native": "0.72.3",
52
- "@typescript-eslint/eslint-plugin": "6.8.0",
53
- "@typescript-eslint/eslint-plugin-tslint": "6.8.0",
54
- "@typescript-eslint/parser": "6.8.0",
55
- "commitlint": "17.8.0",
56
- "concurrently": "8.2.1",
57
- "eslint": "8.51.0",
49
+ "@types/jest": "29.5.7",
50
+ "@types/react": "18.2.34",
51
+ "@typescript-eslint/eslint-plugin": "6.9.1",
52
+ "@typescript-eslint/eslint-plugin-tslint": "6.9.1",
53
+ "@typescript-eslint/parser": "6.9.1",
54
+ "commitlint": "18.2.0",
55
+ "concurrently": "8.2.2",
56
+ "eslint": "8.53.0",
58
57
  "eslint-config-codemask": "1.1.7",
59
58
  "eslint-plugin-functional": "6.0.0",
60
- "eslint-plugin-import": "2.28.1",
59
+ "eslint-plugin-import": "2.29.0",
61
60
  "eslint-plugin-jsdoc": "46.8.2",
62
- "eslint-plugin-jsx-a11y": "6.7.1",
61
+ "eslint-plugin-jsx-a11y": "6.8.0",
63
62
  "eslint-plugin-nested-if": "1.0.0",
64
63
  "eslint-plugin-no-else": "0.2.2",
65
64
  "eslint-plugin-no-loops": "0.3.0",
@@ -14,7 +14,8 @@ Pod::Spec.new do |s|
14
14
  s.source = { :git => package["repository"], :tag => "#{s.version}" }
15
15
 
16
16
  s.source_files = [
17
- "ios/*.{h,m,mm}"
17
+ "ios/*.{h,mm}",
18
+ "cxx/*.{h,cpp}"
18
19
  ]
19
20
 
20
21
  s.dependency "React-Core"
@@ -3,6 +3,7 @@ import type { UnistylesThemes, UnistylesBreakpoints } from './global'
3
3
 
4
4
  export class UnistyleRegistry {
5
5
  public config: UnistylesConfig = {}
6
+ public themeNames: Array<keyof UnistylesThemes> = []
6
7
  public themes: UnistylesThemes = {} as UnistylesThemes
7
8
  public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
8
9
  public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
@@ -11,7 +12,11 @@ export class UnistyleRegistry {
11
12
 
12
13
  public addThemes = (themes: UnistylesThemes) => {
13
14
  this.themes = themes
14
- this.unistylesBridge.themes = Object.keys(themes) as Array<keyof UnistylesThemes>
15
+
16
+ const keys = Object.keys(themes) as Array<keyof UnistylesThemes>
17
+
18
+ this.unistylesBridge.themes = keys
19
+ this.themeNames = keys
15
20
 
16
21
  return this
17
22
  }
@@ -32,4 +37,14 @@ export class UnistyleRegistry {
32
37
 
33
38
  return this
34
39
  }
40
+
41
+ public dangerouslyUnregister = () => {
42
+ this.config = {}
43
+ this.themeNames = []
44
+ this.themes = {} as UnistylesThemes
45
+ this.breakpoints = {} as UnistylesBreakpoints
46
+ this.sortedBreakpointPairs = []
47
+
48
+ this.unistylesBridge.unregister()
49
+ }
35
50
  }
@@ -19,7 +19,7 @@ export class UnistylesRuntime {
19
19
  }
20
20
 
21
21
  public get themeName() {
22
- return this.unistylesBridge.theme
22
+ return this.unistylesBridge.themeName
23
23
  }
24
24
 
25
25
  public get breakpoint() {
@@ -50,10 +50,14 @@ export class UnistylesRuntime {
50
50
  return true
51
51
  }
52
52
 
53
- return false
53
+ throw new Error(UnistylesError.ThemeNotRegistered)
54
54
  }
55
55
 
56
56
  public getTheme = (forName: keyof UnistylesThemes) => {
57
+ if (this.registry.themeNames.length === 0) {
58
+ return {} as UnistylesThemes[keyof UnistylesThemes]
59
+ }
60
+
57
61
  if (!this.hasTheme(forName)) {
58
62
  throw new Error(UnistylesError.ThemeNotFound)
59
63
  }
package/src/global.ts CHANGED
@@ -1,2 +1,5 @@
1
1
  export interface UnistylesThemes {}
2
- export interface UnistylesBreakpoints {}
2
+ export interface UnistylesBreakpoints {
3
+ landscape?: number,
4
+ portrait?: number,
5
+ }
@@ -1,13 +1,16 @@
1
- import { useEffect, useRef, useState } from 'react'
1
+ import { useEffect, useLayoutEffect, useRef, useState } from 'react'
2
2
  import type { ScreenSize } from '../types'
3
- import { isServer } from '../utils'
4
3
 
5
4
  export const useDimensions = (): ScreenSize => {
6
5
  const timerRef = useRef<ReturnType<typeof setTimeout>>()
7
- const [screenSize, setScreenSize] = useState<ScreenSize>({
8
- width: isServer ? 0 : window.innerWidth,
9
- height: isServer ? 0 : window.innerHeight
10
- })
6
+ const [screenSize, setScreenSize] = useState<ScreenSize>({} as ScreenSize)
7
+
8
+ useLayoutEffect(() => {
9
+ setScreenSize({
10
+ width: window.innerWidth,
11
+ height: window.innerHeight
12
+ })
13
+ }, [])
11
14
 
12
15
  useEffect(() => {
13
16
  const handleResize = () => {
package/src/index.ts CHANGED
@@ -15,6 +15,8 @@ const UnistylesRegistry = {
15
15
  addConfig
16
16
  }
17
17
 
18
+ export const __dangerouslyUnregister = unistyles.registry.dangerouslyUnregister
19
+
18
20
  export {
19
21
  UnistylesRuntime,
20
22
  UnistylesRegistry
package/src/types/cxx.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
2
+ import type { ScreenSize } from './breakpoints'
2
3
 
3
4
  export type Nullable<T> = T | null
4
5
  export type ColorSchemeName = 'light' | 'dark' | undefined
@@ -17,7 +18,7 @@ export type UnistylesBridge = {
17
18
  screenWidth: number,
18
19
  screenHeight: number,
19
20
  hasAdaptiveThemes: boolean,
20
- theme: keyof UnistylesThemes,
21
+ themeName: keyof UnistylesThemes,
21
22
  breakpoint: keyof UnistylesBreakpoints,
22
23
  colorScheme: ColorSchemeName,
23
24
  sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
@@ -27,39 +28,39 @@ export type UnistylesBridge = {
27
28
  useBreakpoints(breakpoints: UnistylesBreakpoints): void,
28
29
  useTheme(name: keyof UnistylesThemes): void,
29
30
  useAdaptiveThemes(enable: boolean): void,
31
+
32
+ // other
33
+ unregister(): void
30
34
  }
31
35
 
32
36
  export enum CxxUnistylesEventTypes {
33
37
  Theme = 'theme',
34
- Size = 'size',
35
- Breakpoint = 'breakpoint'
38
+ Layout = 'layout'
36
39
  }
37
40
 
38
- export type CxxUnistylesThemeEvent = {
41
+ export type UnistylesThemeEvent = {
39
42
  type: CxxUnistylesEventTypes.Theme,
40
43
  payload: {
41
44
  themeName: keyof UnistylesThemes
42
45
  }
43
46
  }
44
47
 
45
- export type CxxUnistylesSizeEvent = {
46
- type: CxxUnistylesEventTypes.Size,
47
- payload: {
48
- width: number,
49
- height: number
50
- }
51
- }
52
-
53
- export type CxxUnistylesBreakpointEvent = {
54
- type: CxxUnistylesEventTypes.Breakpoint,
48
+ export type UnistylesMobileLayoutEvent = {
49
+ type: CxxUnistylesEventTypes.Layout,
55
50
  payload: {
56
- breakpoint: keyof UnistylesBreakpoints
51
+ screen: ScreenSize,
52
+ breakpoint: keyof UnistylesBreakpoints,
53
+ orientation: ScreenOrientation
57
54
  }
58
55
  }
59
56
 
60
- export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent
57
+ export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent
61
58
 
62
59
  export enum UnistylesError {
63
60
  RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
64
- ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND'
61
+ ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND',
62
+ ThemeNotRegistered = 'UNISTYLES_ERROR_THEME_NOT_REGISTERED',
63
+ ThemesCannotBeEmpty = 'UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY',
64
+ BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
65
+ BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
65
66
  }
@@ -1,7 +1,7 @@
1
- import { useRef } from 'react'
1
+ import { useMemo } from 'react'
2
2
  import { unistyles } from './Unistyles'
3
3
  import type { UnistylesThemes } from './global'
4
4
 
5
5
  export const useInitialTheme = (forName: keyof UnistylesThemes) => {
6
- useRef(unistyles.runtime.setTheme(forName))
6
+ useMemo(() => unistyles.runtime.setTheme(forName), [])
7
7
  }
package/src/useStyles.ts CHANGED
@@ -31,13 +31,13 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
31
31
  if (typeof value === 'function') {
32
32
  return {
33
33
  ...acc,
34
- [key]: proxifyFunction(value, breakpoint!, screenSize)
34
+ [key]: proxifyFunction(value, breakpoint, screenSize)
35
35
  }
36
36
  }
37
37
 
38
38
  return StyleSheet.create({
39
39
  ...acc,
40
- [key]: parseStyle<ST>(style, breakpoint!, screenSize)
40
+ [key]: parseStyle<ST>(style, breakpoint, screenSize)
41
41
  })
42
42
  }, {} as ST), [breakpoint, screenSize, parsedStyles])
43
43
 
@@ -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,6 +1,7 @@
1
1
  import { unistyles } from '../Unistyles'
2
- import { throwError } from './common'
2
+ import { isMobile, Orientation, throwError } from './common'
3
3
  import type { ScreenSize, MediaQueries } from '../types'
4
+ import { ScreenOrientation } from '../types'
4
5
  import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
5
6
  import type { UnistylesBreakpoints } from '../global'
6
7
 
@@ -66,7 +67,7 @@ export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): U
66
67
  export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
67
68
  const [key] = breakpointEntries
68
69
  .find(([, value], index, otherBreakpoints) => {
69
- const minVal = value
70
+ const minVal = value as number
70
71
  const maxVal = otherBreakpoints[index + 1]?.[1]
71
72
 
72
73
  if (!maxVal) {
@@ -118,7 +119,20 @@ export const getValueForBreakpoint = (
118
119
  return value[customMediaQueryKey]
119
120
  }
120
121
 
121
- // if no custom media query, or didn't match, proceed with defined breakpoints
122
+ // at this point user didn't use custom media queries (:w, :h)
123
+ // check if user defined any breakpoints
124
+ const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0
125
+
126
+ // if not then we can fallback to horizontal and portrait (mobile only)
127
+ if (!hasBreakpoints && isMobile && (Orientation.Landscape in value || Orientation.Portrait in value)) {
128
+ return value[
129
+ unistyles.runtime.orientation === ScreenOrientation.Portrait
130
+ ? Orientation.Portrait
131
+ : Orientation.Landscape
132
+ ]
133
+ }
134
+
135
+ // if user defined breakpoints, then we look for the valid one
122
136
  const unifiedKey = breakpoint?.toLowerCase() as keyof typeof value
123
137
  const directBreakpoint = value[unifiedKey]
124
138
 
@@ -127,7 +141,7 @@ export const getValueForBreakpoint = (
127
141
  return directBreakpoint
128
142
  }
129
143
 
130
- // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
144
+ // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
131
145
  const breakpointPairs = unistyles.runtime.sortedBreakpoints
132
146
  const currentBreakpoint = breakpointPairs
133
147
  .findIndex(([key]) => key === unifiedKey)
@@ -8,5 +8,11 @@ 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'
12
13
  export const isServer = typeof window === 'undefined'
14
+
15
+ export const Orientation = {
16
+ Landscape: 'landscape',
17
+ Portrait: 'portrait'
18
+ } 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,