react-native-unistyles 3.0.0-nightly-20250512 → 3.0.0-nightly-20250513

package/lib/commonjs/reanimated/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useAnimatedTheme", {
+  enumerable: true,
+  get: function () {
+    return _useAnimatedTheme.useAnimatedTheme;
+  }
+});
+var _useAnimatedTheme = require("./useAnimatedTheme");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/reanimated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_useAnimatedTheme","require"],"sourceRoot":"../../../src","sources":["reanimated/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/reanimated/useAnimatedTheme.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatedTheme = void 0;
+var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _specs = require("../specs");
+var _services = require("../web/services");
+const useAnimatedTheme = () => {
+  const theme = (0, _reactNativeReanimated.useSharedValue)(_specs.UnistylesRuntime.getTheme());
+  (0, _react.useEffect)(() => {
+    const dispose = _services.services.listener.addListeners([_specs.UnistyleDependency.Theme], () => theme.set(_specs.UnistylesRuntime.getTheme()));
+    return () => {
+      dispose();
+    };
+  }, []);
+  return theme;
+};
+exports.useAnimatedTheme = useAnimatedTheme;
+//# sourceMappingURL=useAnimatedTheme.js.map

package/lib/commonjs/reanimated/useAnimatedTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNativeReanimated","_specs","_services","useAnimatedTheme","theme","useSharedValue","UnistylesRuntime","getTheme","useEffect","dispose","services","listener","addListeners","UnistyleDependency","Theme","set","exports"],"sourceRoot":"../../../src","sources":["reanimated/useAnimatedTheme.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,SAAA,GAAAH,OAAA;AAEO,MAAMI,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAMC,KAAK,GAAG,IAAAC,qCAAc,EAAiBC,uBAAgB,CAACC,QAAQ,CAAC,CAAC,CAAC;EAEzE,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,OAAO,GAAGC,kBAAQ,CAACC,QAAQ,CAACC,YAAY,CAAC,CAACC,yBAAkB,CAACC,KAAK,CAAC,EAAE,MAAMV,KAAK,CAACW,GAAG,CAACT,uBAAgB,CAACC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExH,OAAO,MAAM;MACTE,OAAO,CAAC,CAAC;IACb,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,KAAK;AAChB,CAAC;AAAAY,OAAA,CAAAb,gBAAA,GAAAA,gBAAA","ignoreList":[]}

package/lib/commonjs/reanimated/useAnimatedTheme.native.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatedTheme = void 0;
+var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _specs = require("../specs");
+const useAnimatedTheme = () => {
+  const theme = (0, _reactNativeReanimated.useSharedValue)(_specs.UnistylesRuntime.getTheme());
+  (0, _react.useEffect)(() => {
+    // @ts-ignore this is hidden from TS
+    const dispose = _specs.StyleSheet.addChangeListener(changedDependencies => {
+      if (changedDependencies.includes(_specs.UnistyleDependency.Theme)) {
+        theme.set(_specs.UnistylesRuntime.getTheme());
+      }
+    });
+    return () => dispose();
+  }, []);
+  return theme;
+};
+exports.useAnimatedTheme = useAnimatedTheme;
+//# sourceMappingURL=useAnimatedTheme.native.js.map

package/lib/commonjs/reanimated/useAnimatedTheme.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNativeReanimated","_specs","useAnimatedTheme","theme","useSharedValue","UnistylesRuntime","getTheme","useEffect","dispose","StyleSheet","addChangeListener","changedDependencies","includes","UnistyleDependency","Theme","set","exports"],"sourceRoot":"../../../src","sources":["reanimated/useAnimatedTheme.native.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAGO,MAAMG,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAMC,KAAK,GAAG,IAAAC,qCAAc,EAAiBC,uBAAgB,CAACC,QAAQ,CAAC,CAAC,CAAC;EAEzE,IAAAC,gBAAS,EAAC,MAAM;IACZ;IACA,MAAMC,OAAO,GAAGC,iBAAU,CAACC,iBAAiB,CAACC,mBAAmB,IAAI;MAChE,IAAIA,mBAAmB,CAACC,QAAQ,CAACC,yBAAkB,CAACC,KAAK,CAAC,EAAE;QACxDX,KAAK,CAACY,GAAG,CAACV,uBAAgB,CAACC,QAAQ,CAAC,CAAC,CAAC;MAC1C;IACJ,CAAC,CAAC;IAEF,OAAO,MAAME,OAAO,CAAC,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,KAAK;AAChB,CAAC;AAAAa,OAAA,CAAAd,gBAAA,GAAAA,gBAAA","ignoreList":[]}

package/lib/commonjs/web-only/getWebProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWebProps = void 0;
+var _core = require("../core");
+var _createUnistylesRef = require("../web/utils/createUnistylesRef");
+const getWebProps = style => {
+  const styles = (0, _core.getClassName)(style);
+  const ref = (0, _createUnistylesRef.createUnistylesRef)(styles);
+  const [generatedStyles] = styles ?? [];
+  return {
+    className: [generatedStyles?.hash, generatedStyles?.injectedClassName].filter(Boolean).join(' '),
+    ref
+  };
+};
+exports.getWebProps = getWebProps;
+//# sourceMappingURL=getWebProps.js.map

package/lib/commonjs/web-only/getWebProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_core","require","_createUnistylesRef","getWebProps","style","styles","getClassName","ref","createUnistylesRef","generatedStyles","className","hash","injectedClassName","filter","Boolean","join","exports"],"sourceRoot":"../../../src","sources":["web-only/getWebProps.ts"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AAEO,MAAME,WAAW,GAAOC,KAAyB,IAAK;EACzD,MAAMC,MAAM,GAAG,IAAAC,kBAAY,EAACF,KAAwB,CAAC;EACrD,MAAMG,GAAG,GAAG,IAAAC,sCAAkB,EAAIH,MAAM,CAAC;EACzC,MAAM,CAACI,eAAe,CAAC,GAAGJ,MAAM,IAAI,EAAE;EAEtC,OAAO;IACHK,SAAS,EAAE,CACPD,eAAe,EAAEE,IAAI,EACrBF,eAAe,EAAEG,iBAAiB,CACrC,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;IAC3BR;EACJ,CAAC;AACL,CAAC;AAAAS,OAAA,CAAAb,WAAA,GAAAA,WAAA","ignoreList":[]}

package/lib/commonjs/web-only/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getWebProps", {
+  enumerable: true,
+  get: function () {
+    return _getWebProps.getWebProps;
+  }
+});
+var _getWebProps = require("./getWebProps");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/web-only/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_getWebProps","require"],"sourceRoot":"../../../src","sources":["web-only/index.ts"],"mappings":";;;;;;;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/module/reanimated/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { useAnimatedTheme } from './useAnimatedTheme';
+//# sourceMappingURL=index.js.map

package/lib/module/reanimated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAnimatedTheme"],"sourceRoot":"../../../src","sources":["reanimated/index.ts"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/reanimated/useAnimatedTheme.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import { useEffect } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import { UnistyleDependency, UnistylesRuntime } from '../specs';
+import { services } from '../web/services';
+export const useAnimatedTheme = () => {
+  const theme = useSharedValue(UnistylesRuntime.getTheme());
+  useEffect(() => {
+    const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()));
+    return () => {
+      dispose();
+    };
+  }, []);
+  return theme;
+};
+//# sourceMappingURL=useAnimatedTheme.js.map

package/lib/module/reanimated/useAnimatedTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useSharedValue","UnistyleDependency","UnistylesRuntime","services","useAnimatedTheme","theme","getTheme","dispose","listener","addListeners","Theme","set"],"sourceRoot":"../../../src","sources":["reanimated/useAnimatedTheme.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,kBAAkB,EAAEC,gBAAgB,QAAQ,UAAU;AAE/D,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAMC,KAAK,GAAGL,cAAc,CAAiBE,gBAAgB,CAACI,QAAQ,CAAC,CAAC,CAAC;EAEzEP,SAAS,CAAC,MAAM;IACZ,MAAMQ,OAAO,GAAGJ,QAAQ,CAACK,QAAQ,CAACC,YAAY,CAAC,CAACR,kBAAkB,CAACS,KAAK,CAAC,EAAE,MAAML,KAAK,CAACM,GAAG,CAACT,gBAAgB,CAACI,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExH,OAAO,MAAM;MACTC,OAAO,CAAC,CAAC;IACb,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/module/reanimated/useAnimatedTheme.native.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import { useEffect } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs';
+export const useAnimatedTheme = () => {
+  const theme = useSharedValue(UnistylesRuntime.getTheme());
+  useEffect(() => {
+    // @ts-ignore this is hidden from TS
+    const dispose = StyleSheet.addChangeListener(changedDependencies => {
+      if (changedDependencies.includes(UnistyleDependency.Theme)) {
+        theme.set(UnistylesRuntime.getTheme());
+      }
+    });
+    return () => dispose();
+  }, []);
+  return theme;
+};
+//# sourceMappingURL=useAnimatedTheme.native.js.map

package/lib/module/reanimated/useAnimatedTheme.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useSharedValue","StyleSheet","UnistyleDependency","UnistylesRuntime","useAnimatedTheme","theme","getTheme","dispose","addChangeListener","changedDependencies","includes","Theme","set"],"sourceRoot":"../../../src","sources":["reanimated/useAnimatedTheme.native.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,UAAU,EAAEC,kBAAkB,EAAEC,gBAAgB,QAAQ,UAAU;AAG3E,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAMC,KAAK,GAAGL,cAAc,CAAiBG,gBAAgB,CAACG,QAAQ,CAAC,CAAC,CAAC;EAEzEP,SAAS,CAAC,MAAM;IACZ;IACA,MAAMQ,OAAO,GAAGN,UAAU,CAACO,iBAAiB,CAACC,mBAAmB,IAAI;MAChE,IAAIA,mBAAmB,CAACC,QAAQ,CAACR,kBAAkB,CAACS,KAAK,CAAC,EAAE;QACxDN,KAAK,CAACO,GAAG,CAACT,gBAAgB,CAACG,QAAQ,CAAC,CAAC,CAAC;MAC1C;IACJ,CAAC,CAAC;IAEF,OAAO,MAAMC,OAAO,CAAC,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/module/web-only/getWebProps.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import { getClassName } from '../core';
+import { createUnistylesRef } from '../web/utils/createUnistylesRef';
+export const getWebProps = style => {
+  const styles = getClassName(style);
+  const ref = createUnistylesRef(styles);
+  const [generatedStyles] = styles ?? [];
+  return {
+    className: [generatedStyles?.hash, generatedStyles?.injectedClassName].filter(Boolean).join(' '),
+    ref
+  };
+};
+//# sourceMappingURL=getWebProps.js.map

package/lib/module/web-only/getWebProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getClassName","createUnistylesRef","getWebProps","style","styles","ref","generatedStyles","className","hash","injectedClassName","filter","Boolean","join"],"sourceRoot":"../../../src","sources":["web-only/getWebProps.ts"],"mappings":";;AACA,SAASA,YAAY,QAAQ,SAAS;AAEtC,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,MAAMC,WAAW,GAAOC,KAAyB,IAAK;EACzD,MAAMC,MAAM,GAAGJ,YAAY,CAACG,KAAwB,CAAC;EACrD,MAAME,GAAG,GAAGJ,kBAAkB,CAAIG,MAAM,CAAC;EACzC,MAAM,CAACE,eAAe,CAAC,GAAGF,MAAM,IAAI,EAAE;EAEtC,OAAO;IACHG,SAAS,EAAE,CACPD,eAAe,EAAEE,IAAI,EACrBF,eAAe,EAAEG,iBAAiB,CACrC,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;IAC3BP;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/module/web-only/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { getWebProps } from './getWebProps';
+//# sourceMappingURL=index.js.map

package/lib/module/web-only/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getWebProps"],"sourceRoot":"../../../src","sources":["web-only/index.ts"],"mappings":";;AACA,SAASA,WAAW,QAAQ,eAAe","ignoreList":[]}

package/lib/typescript/src/reanimated/index.d.ts

@@ -0,0 +1,2 @@
+export { useAnimatedTheme } from './useAnimatedTheme';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/reanimated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/reanimated/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/lib/typescript/src/reanimated/useAnimatedTheme.d.ts

@@ -0,0 +1,2 @@
+export declare const useAnimatedTheme: () => import("react-native-reanimated").SharedValue<never>;
+//# sourceMappingURL=useAnimatedTheme.d.ts.map

package/lib/typescript/src/reanimated/useAnimatedTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatedTheme.d.ts","sourceRoot":"","sources":["../../../../src/reanimated/useAnimatedTheme.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,4DAY5B,CAAA"}

package/lib/typescript/src/reanimated/useAnimatedTheme.native.d.ts

@@ -0,0 +1,2 @@
+export declare const useAnimatedTheme: () => import("react-native-reanimated").SharedValue<never>;
+//# sourceMappingURL=useAnimatedTheme.native.d.ts.map

package/lib/typescript/src/reanimated/useAnimatedTheme.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatedTheme.native.d.ts","sourceRoot":"","sources":["../../../../src/reanimated/useAnimatedTheme.native.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,4DAe5B,CAAA"}

package/lib/typescript/src/web-only/getWebProps.d.ts

@@ -0,0 +1,7 @@
+import type { StyleProp } from 'react-native';
+import type { RNStyle } from '../types';
+export declare const getWebProps: <T>(style: StyleProp<RNStyle>) => {
+    className: string;
+    ref: ((ref: import("../types").Nullable<T>) => void) | undefined;
+};
+//# sourceMappingURL=getWebProps.d.ts.map

package/lib/typescript/src/web-only/getWebProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getWebProps.d.ts","sourceRoot":"","sources":["../../../../src/web-only/getWebProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,EAAE,OAAO,EAAmB,MAAM,UAAU,CAAA;AAGxD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,SAAS,CAAC,OAAO,CAAC;;;CAYvD,CAAA"}

package/lib/typescript/src/web-only/index.d.ts

@@ -0,0 +1,2 @@
+export { getWebProps } from './getWebProps';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/web-only/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/web-only/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-nightly-20250512",
+  "version": "3.0.0-nightly-20250513",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "NODE_ENV=babel-test jest ./plugin",
@@ -51,8 +51,22 @@
       "types": "./lib/typescript/src/server/index.d.ts",
       "import": "./lib/module/server/index.js",
       "browser": "./lib/module/server/index.js",
-      "react-native": "./src/server.ts",
+      "react-native": "./src/server/index.ts",
       "default": "./lib/commonjs/server/index.js"
+    },
+    "./web": {
+      "types": "./lib/typescript/src/web-only/index.d.ts",
+      "import": "./lib/module/web-only/index.js",
+      "browser": "./lib/module/web-only/index.js",
+      "react-native": "./src/web-only/index.ts",
+      "default": "./lib/commonjs/web-only/index.js"
+    },
+    "./reanimated": {
+      "types": "./lib/typescript/src/reanimated/index.d.ts",
+      "import": "./lib/module/reanimated/index.js",
+      "browser": "./lib/module/reanimated/index.js",
+      "react-native": "./src/reanimated/index.ts",
+      "default": "./lib/commonjs/reanimated/index.js"
     }
   },
   "files": [
@@ -124,6 +138,7 @@
     "react-native": "0.77.1",
     "react-native-builder-bob": "0.37.0",
     "react-native-nitro-modules": "0.25.2",
+    "react-native-reanimated": "3.17.5",
     "react-native-web": "0.19.13",
     "react-test-renderer": "18.3.1",
     "release-it": "17.11.0",
@@ -134,7 +149,13 @@
     "react": "*",
     "react-native": ">=0.76.0",
     "react-native-edge-to-edge": "*",
-    "react-native-nitro-modules": "*"
+    "react-native-nitro-modules": "*",
+    "react-native-reanimated": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    }
   },
   "workspaces": [
     "example",

package/src/reanimated/index.ts

@@ -0,0 +1 @@
+export { useAnimatedTheme } from './useAnimatedTheme'

package/src/reanimated/useAnimatedTheme.native.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+import { useSharedValue } from 'react-native-reanimated'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import type { UnistylesTheme } from '../types'
+
+export const useAnimatedTheme = () => {
+    const theme = useSharedValue<UnistylesTheme>(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        // @ts-ignore this is hidden from TS
+        const dispose = StyleSheet.addChangeListener(changedDependencies => {
+            if (changedDependencies.includes(UnistyleDependency.Theme)) {
+                theme.set(UnistylesRuntime.getTheme())
+            }
+        })
+
+        return () => dispose()
+    }, [])
+
+    return theme
+}

package/src/reanimated/useAnimatedTheme.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { useSharedValue } from 'react-native-reanimated'
+import { UnistyleDependency, UnistylesRuntime } from '../specs'
+import type { UnistylesTheme } from '../types'
+import { services } from '../web/services'
+
+export const useAnimatedTheme = () => {
+    const theme = useSharedValue<UnistylesTheme>(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()))
+
+        return () => {
+            dispose()
+        }
+    }, [])
+
+    return theme
+}

package/src/web-only/getWebProps.ts

@@ -0,0 +1,18 @@
+import type { StyleProp } from 'react-native'
+import { getClassName } from '../core'
+import type { RNStyle, UnistylesValues } from '../types'
+import { createUnistylesRef } from '../web/utils/createUnistylesRef'
+
+export const getWebProps = <T>(style: StyleProp<RNStyle>) => {
+    const styles = getClassName(style as UnistylesValues)
+    const ref = createUnistylesRef<T>(styles)
+    const [generatedStyles] = styles ?? []
+
+    return {
+        className: [
+            generatedStyles?.hash,
+            generatedStyles?.injectedClassName,
+        ].filter(Boolean).join(' '),
+        ref
+    }
+}

package/src/web-only/index.ts

@@ -0,0 +1,2 @@
+
+export { getWebProps } from './getWebProps'