react-native-unistyles 1.1.2 → 1.1.4

package/lib/commonjs/hooks/useDimensions.web.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDimensions = void 0;
 var _react = require("react");
-var _utils = require("../utils");
 const useDimensions = () => {
   const timerRef = (0, _react.useRef)();
-  const [screenSize, setScreenSize] = (0, _react.useState)({
-    width: _utils.isServer ? undefined : window.innerWidth,
-    height: _utils.isServer ? undefined : window.innerHeight
-  });
+  const [screenSize, setScreenSize] = (0, _react.useState)({});
+  (0, _react.useLayoutEffect)(() => {
+    setScreenSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  }, []);
   (0, _react.useEffect)(() => {
     const handleResize = () => {
       clearTimeout(timerRef.current);

package/lib/commonjs/hooks/useDimensions.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_utils","useDimensions","timerRef","useRef","screenSize","setScreenSize","useState","width","isServer","undefined","window","innerWidth","height","innerHeight","useEffect","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAgC,CAAC;EACxD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAa;IACrDC,KAAK,EAAEC,eAAQ,GACTC,SAAS,GACTC,MAAM,CAACC,UAAU;IACvBC,MAAM,EAAEJ,eAAQ,GACVC,SAAS,GACTC,MAAM,CAACG;EACjB,CAAe,CAAC;EAEhB,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACd,QAAQ,CAACe,OAAO,CAAC;MAE9Bf,QAAQ,CAACe,OAAO,GAAGC,UAAU,CAAC,MAAMb,aAAa,CAAC;QAC9CE,KAAK,EAAEG,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACS,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTL,MAAM,CAACU,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACd,QAAQ,CAACe,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOb,UAAU;AACrB,CAAC;AAAAiB,OAAA,CAAApB,aAAA,GAAAA,aAAA"}
+{"version":3,"names":["_react","require","useDimensions","timerRef","useRef","screenSize","setScreenSize","useState","useLayoutEffect","width","window","innerWidth","height","innerHeight","useEffect","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAgC,CAAC;EACxD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAa,CAAC,CAAe,CAAC;EAE1E,IAAAC,sBAAe,EAAC,MAAM;IAClBF,aAAa,CAAC;MACVG,KAAK,EAAEC,MAAM,CAACC,UAAU;MACxBC,MAAM,EAAEF,MAAM,CAACG;IACnB,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACb,QAAQ,CAACc,OAAO,CAAC;MAE9Bd,QAAQ,CAACc,OAAO,GAAGC,UAAU,CAAC,MAAMZ,aAAa,CAAC;QAC9CG,KAAK,EAAEC,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACS,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTL,MAAM,CAACU,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACb,QAAQ,CAACc,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOZ,UAAU;AACrB,CAAC;AAAAgB,OAAA,CAAAnB,aAAA,GAAAA,aAAA"}

package/lib/module/hooks/useDimensions.web.js

@@ -1,11 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
-import { isServer } from '../utils';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 export const useDimensions = () => {
   const timerRef = useRef();
-  const [screenSize, setScreenSize] = useState({
-    width: isServer ? undefined : window.innerWidth,
-    height: isServer ? undefined : window.innerHeight
-  });
+  const [screenSize, setScreenSize] = useState({});
+  useLayoutEffect(() => {
+    setScreenSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  }, []);
   useEffect(() => {
     const handleResize = () => {
       clearTimeout(timerRef.current);

package/lib/module/hooks/useDimensions.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","useState","isServer","useDimensions","timerRef","screenSize","setScreenSize","width","undefined","window","innerWidth","height","innerHeight","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEnD,SAASC,QAAQ,QAAQ,UAAU;AAEnC,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAGJ,MAAM,CAAgC,CAAC;EACxD,MAAM,CAACK,UAAU,EAAEC,aAAa,CAAC,GAAGL,QAAQ,CAAa;IACrDM,KAAK,EAAEL,QAAQ,GACTM,SAAS,GACTC,MAAM,CAACC,UAAU;IACvBC,MAAM,EAAET,QAAQ,GACVM,SAAS,GACTC,MAAM,CAACG;EACjB,CAAe,CAAC;EAEhBb,SAAS,CAAC,MAAM;IACZ,MAAMc,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACV,QAAQ,CAACW,OAAO,CAAC;MAE9BX,QAAQ,CAACW,OAAO,GAAGC,UAAU,CAAC,MAAMV,aAAa,CAAC;QAC9CC,KAAK,EAAEE,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTJ,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACV,QAAQ,CAACW,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOV,UAAU;AACrB,CAAC"}
+{"version":3,"names":["useEffect","useLayoutEffect","useRef","useState","useDimensions","timerRef","screenSize","setScreenSize","width","window","innerWidth","height","innerHeight","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAGpE,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAGH,MAAM,CAAgC,CAAC;EACxD,MAAM,CAACI,UAAU,EAAEC,aAAa,CAAC,GAAGJ,QAAQ,CAAa,CAAC,CAAe,CAAC;EAE1EF,eAAe,CAAC,MAAM;IAClBM,aAAa,CAAC;MACVC,KAAK,EAAEC,MAAM,CAACC,UAAU;MACxBC,MAAM,EAAEF,MAAM,CAACG;IACnB,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAENZ,SAAS,CAAC,MAAM;IACZ,MAAMa,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;MAE9BV,QAAQ,CAACU,OAAO,GAAGC,UAAU,CAAC,MAAMT,aAAa,CAAC;QAC9CC,KAAK,EAAEC,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTJ,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOT,UAAU;AACrB,CAAC"}

package/lib/typescript/src/hooks/useDimensions.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDimensions.web.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,eAAO,MAAM,aAAa,QAAO,UA8BhC,CAAA"}
+{"version":3,"file":"useDimensions.web.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,aAAa,QAAO,UA8BhC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/src/hooks/useDimensions.web.ts

@@ -1,17 +1,16 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { ScreenSize } from '../types'
-import { isServer } from '../utils'
 
 export const useDimensions = (): ScreenSize => {
     const timerRef = useRef<ReturnType<typeof setTimeout>>()
-    const [screenSize, setScreenSize] = useState<ScreenSize>({
-        width: isServer
-            ? undefined
-            : window.innerWidth,
-        height: isServer
-            ? undefined
-            : window.innerHeight
-    } as ScreenSize)
+    const [screenSize, setScreenSize] = useState<ScreenSize>({} as ScreenSize)
+
+    useLayoutEffect(() => {
+        setScreenSize({
+            width: window.innerWidth,
+            height: window.innerHeight
+        })
+    }, [])
 
     useEffect(() => {
         const handleResize = () => {