@react-native-styled-system/core 1.1.1 → 1.2.0

package/lib/commonjs/hook/useSx.js

@@ -21,7 +21,8 @@ const useSx = (props, {
   theme: optionTheme,
   styleType = defaultUseSxOptions.styleType,
   transform = defaultUseSxOptions.transform,
-  fallback
+  fallback,
+  cache
 } = defaultUseSxOptions) => {
   const styledSystemContext = (0, _react.useContext)(_StyledSystemProvider.StyledSystemContext);
   const getStyle = (0, _useStableCallback.useStableCallback)(() => {
@@ -56,13 +57,22 @@ const useSx = (props, {
     const composedStyle = !mergedSxStyle ? props?.style : props?.style ? _reactNative.StyleSheet.compose(mergedSxStyle, props.style) : mergedSxStyle;
     if (_jsUtil.is.function(transform)) {
       const transformedSx = transform(_reactNative.StyleSheet.flatten(composedStyle));
-      return (0, _StyleHash.getCachedStyle)(_reactNative.StyleSheet.compose(composedStyle, (0, _propsToThemedStyle.propsToThemedStyle)({
+      const ret = _reactNative.StyleSheet.compose(composedStyle, (0, _propsToThemedStyle.propsToThemedStyle)({
         theme,
         sx: transformedSx,
         styleType
-      })));
+      }));
+      if (cache) {
+        return (0, _StyleHash.getCachedStyle)(ret);
+      } else {
+        return ret;
+      }
     } else {
-      return (0, _StyleHash.getCachedStyle)(composedStyle);
+      if (cache) {
+        return (0, _StyleHash.getCachedStyle)(composedStyle);
+      } else {
+        return composedStyle;
+      }
     }
   });
   const filteredProps = (0, _react.useMemo)(() => {

package/lib/commonjs/hook/useSx.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNative","_jsUtil","_SxProps","_useStableCallback","_mutateShortcutPropToOriginalKeys","_printWarning","_StyleHash","_StyledSystemProvider","_propsToThemedStyle","defaultUseSxOptions","styleType","useSx","props","theme","optionTheme","transform","fallback","styledSystemContext","useContext","StyledSystemContext","getStyle","useStableCallback","skip","is","function","propsToThemedStyle","sx","printWarning","mergedSx","mutateShortcutPropToOriginalKeys","mergedSxStyle","composedStyle","style","StyleSheet","compose","transformedSx","flatten","getCachedStyle","filteredProps","useMemo","ret","_viewStylePropList","forEach","keyName","_textStylePropList","exports"],"sourceRoot":"../../../src","sources":["hook/useSx.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNative","_jsUtil","_SxProps","_useStableCallback","_mutateShortcutPropToOriginalKeys","_printWarning","_StyleHash","_StyledSystemProvider","_propsToThemedStyle","defaultUseSxOptions","styleType","useSx","props","theme","optionTheme","transform","fallback","cache","styledSystemContext","useContext","StyledSystemContext","getStyle","useStableCallback","skip","is","function","propsToThemedStyle","sx","printWarning","mergedSx","mutateShortcutPropToOriginalKeys","mergedSxStyle","composedStyle","style","StyleSheet","compose","transformedSx","flatten","ret","getCachedStyle","filteredProps","useMemo","_viewStylePropList","forEach","keyName","_textStylePropList","exports"],"sourceRoot":"../../../src","sources":["hook/useSx.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/hook/useSxStyle.js

@@ -11,7 +11,8 @@ var _StyledSystemProvider = require("../provider/StyledSystemProvider");
 var _propsToThemedStyle = require("../util/propsToThemedStyle");
 const defaultOptions = {};
 const useSxStyle = ({
-  theme: optionTheme
+  theme: optionTheme,
+  cache
 } = defaultOptions) => {
   const styledSystemContext = (0, _react.useContext)(_StyledSystemProvider.StyledSystemContext);
   return sx => {
@@ -20,10 +21,17 @@ const useSxStyle = ({
       (0, _printWarning.printWarning)('theme not found from useSxStyle, empty style will be returned.');
       return {};
     }
-    return (0, _StyleHash.getCachedStyle)((0, _propsToThemedStyle.propsToThemedStyle)({
-      theme,
-      sx
-    }));
+    if (cache) {
+      return (0, _StyleHash.getCachedStyle)((0, _propsToThemedStyle.propsToThemedStyle)({
+        theme,
+        sx
+      }));
+    } else {
+      return (0, _propsToThemedStyle.propsToThemedStyle)({
+        theme,
+        sx
+      });
+    }
   };
 };
 exports.useSxStyle = useSxStyle;

package/lib/commonjs/hook/useSxStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_printWarning","_StyleHash","_StyledSystemProvider","_propsToThemedStyle","defaultOptions","useSxStyle","theme","optionTheme","styledSystemContext","useContext","StyledSystemContext","sx","printWarning","getCachedStyle","propsToThemedStyle","exports"],"sourceRoot":"../../../src","sources":["hook/useSxStyle.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AAKA,MAAMK,cAAiC,GAAG,CAAC,CAAC;AAErC,MAAMC,UAAU,GAAGA,CAAC;EAAEC,KAAK,EAAEC;AAA+B,CAAC,GAAGH,cAAc,KAAK;EACxF,MAAMI,mBAAmB,GAAG,IAAAC,iBAAU,EAACC,yCAAmB,CAAC;EAE3D,OAAQC,EAAe,IAA2B;IAChD,MAAML,KAAK,GAAGC,WAAW,IAAIC,mBAAmB,EAAEF,KAAK;IAEvD,IAAI,CAACA,KAAK,EAAE;MACV,IAAAM,0BAAY,EAAC,gEAAgE,CAAC;MAE9E,OAAO,CAAC,CAAC;IACX;IAEA,OAAO,IAAAC,yBAAc,EACnB,IAAAC,sCAAkB,EAAC;MACjBR,KAAK;MACLK;IACF,CAAC,CACH,CAAC;EACH,CAAC;AACH,CAAC;AAACI,OAAA,CAAAV,UAAA,GAAAA,UAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_printWarning","_StyleHash","_StyledSystemProvider","_propsToThemedStyle","defaultOptions","useSxStyle","theme","optionTheme","cache","styledSystemContext","useContext","StyledSystemContext","sx","printWarning","getCachedStyle","propsToThemedStyle","exports"],"sourceRoot":"../../../src","sources":["hook/useSxStyle.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AAMA,MAAMK,cAAiC,GAAG,CAAC,CAAC;AAErC,MAAMC,UAAU,GAAGA,CAAC;EAAEC,KAAK,EAAEC,WAAW;EAAEC;AAAyB,CAAC,GAAGJ,cAAc,KAAK;EAC/F,MAAMK,mBAAmB,GAAG,IAAAC,iBAAU,EAACC,yCAAmB,CAAC;EAE3D,OAAQC,EAAe,IAA2B;IAChD,MAAMN,KAAK,GAAGC,WAAW,IAAIE,mBAAmB,EAAEH,KAAK;IAEvD,IAAI,CAACA,KAAK,EAAE;MACV,IAAAO,0BAAY,EAAC,gEAAgE,CAAC;MAE9E,OAAO,CAAC,CAAC;IACX;IAEA,IAAIL,KAAK,EAAE;MACT,OAAO,IAAAM,yBAAc,EACnB,IAAAC,sCAAkB,EAAC;QACjBT,KAAK;QACLM;MACF,CAAC,CACH,CAAC;IACH,CAAC,MAAM;MACL,OAAO,IAAAG,sCAAkB,EAAC;QACxBT,KAAK;QACLM;MACF,CAAC,CAAC;IACJ;EACF,CAAC;AACH,CAAC;AAACI,OAAA,CAAAX,UAAA,GAAAA,UAAA","ignoreList":[]}

package/lib/module/hook/useSx.js

@@ -15,7 +15,8 @@ export const useSx = (props, {
   theme: optionTheme,
   styleType = defaultUseSxOptions.styleType,
   transform = defaultUseSxOptions.transform,
-  fallback
+  fallback,
+  cache
 } = defaultUseSxOptions) => {
   const styledSystemContext = useContext(StyledSystemContext);
   const getStyle = useStableCallback(() => {
@@ -50,13 +51,22 @@ export const useSx = (props, {
     const composedStyle = !mergedSxStyle ? props?.style : props?.style ? StyleSheet.compose(mergedSxStyle, props.style) : mergedSxStyle;
     if (is.function(transform)) {
       const transformedSx = transform(StyleSheet.flatten(composedStyle));
-      return getCachedStyle(StyleSheet.compose(composedStyle, propsToThemedStyle({
+      const ret = StyleSheet.compose(composedStyle, propsToThemedStyle({
         theme,
         sx: transformedSx,
         styleType
-      })));
+      }));
+      if (cache) {
+        return getCachedStyle(ret);
+      } else {
+        return ret;
+      }
     } else {
-      return getCachedStyle(composedStyle);
+      if (cache) {
+        return getCachedStyle(composedStyle);
+      } else {
+        return composedStyle;
+      }
     }
   });
   const filteredProps = useMemo(() => {

package/lib/module/hook/useSx.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","useMemo","StyleSheet","is","_textStylePropList","_viewStylePropList","useStableCallback","mutateShortcutPropToOriginalKeys","printWarning","getCachedStyle","StyledSystemContext","propsToThemedStyle","defaultUseSxOptions","styleType","useSx","props","theme","optionTheme","transform","fallback","styledSystemContext","getStyle","skip","function","sx","mergedSx","mergedSxStyle","composedStyle","style","compose","transformedSx","flatten","filteredProps","ret","forEach","keyName"],"sourceRoot":"../../../src","sources":["hook/useSx.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useContext","useMemo","StyleSheet","is","_textStylePropList","_viewStylePropList","useStableCallback","mutateShortcutPropToOriginalKeys","printWarning","getCachedStyle","StyledSystemContext","propsToThemedStyle","defaultUseSxOptions","styleType","useSx","props","theme","optionTheme","transform","fallback","cache","styledSystemContext","getStyle","skip","function","sx","mergedSx","mergedSxStyle","composedStyle","style","compose","transformedSx","flatten","ret","filteredProps","forEach","keyName"],"sourceRoot":"../../../src","sources":["hook/useSx.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/hook/useSxStyle.js

@@ -5,7 +5,8 @@ import { StyledSystemContext } from '../provider/StyledSystemProvider';
 import { propsToThemedStyle } from '../util/propsToThemedStyle';
 const defaultOptions = {};
 export const useSxStyle = ({
-  theme: optionTheme
+  theme: optionTheme,
+  cache
 } = defaultOptions) => {
   const styledSystemContext = useContext(StyledSystemContext);
   return sx => {
@@ -14,10 +15,17 @@ export const useSxStyle = ({
       printWarning('theme not found from useSxStyle, empty style will be returned.');
       return {};
     }
-    return getCachedStyle(propsToThemedStyle({
-      theme,
-      sx
-    }));
+    if (cache) {
+      return getCachedStyle(propsToThemedStyle({
+        theme,
+        sx
+      }));
+    } else {
+      return propsToThemedStyle({
+        theme,
+        sx
+      });
+    }
   };
 };
 //# sourceMappingURL=useSxStyle.js.map

package/lib/module/hook/useSxStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","printWarning","getCachedStyle","StyledSystemContext","propsToThemedStyle","defaultOptions","useSxStyle","theme","optionTheme","styledSystemContext","sx"],"sourceRoot":"../../../src","sources":["hook/useSxStyle.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAKlC,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,kBAAkB,QAAQ,4BAA4B;AAK/D,MAAMC,cAAiC,GAAG,CAAC,CAAC;AAE5C,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC,KAAK,EAAEC;AAA+B,CAAC,GAAGH,cAAc,KAAK;EACxF,MAAMI,mBAAmB,GAAGT,UAAU,CAACG,mBAAmB,CAAC;EAE3D,OAAQO,EAAe,IAA2B;IAChD,MAAMH,KAAK,GAAGC,WAAW,IAAIC,mBAAmB,EAAEF,KAAK;IAEvD,IAAI,CAACA,KAAK,EAAE;MACVN,YAAY,CAAC,gEAAgE,CAAC;MAE9E,OAAO,CAAC,CAAC;IACX;IAEA,OAAOC,cAAc,CACnBE,kBAAkB,CAAC;MACjBG,KAAK;MACLG;IACF,CAAC,CACH,CAAC;EACH,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useContext","printWarning","getCachedStyle","StyledSystemContext","propsToThemedStyle","defaultOptions","useSxStyle","theme","optionTheme","cache","styledSystemContext","sx"],"sourceRoot":"../../../src","sources":["hook/useSxStyle.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAKlC,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,kBAAkB,QAAQ,4BAA4B;AAM/D,MAAMC,cAAiC,GAAG,CAAC,CAAC;AAE5C,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC,KAAK,EAAEC,WAAW;EAAEC;AAAyB,CAAC,GAAGJ,cAAc,KAAK;EAC/F,MAAMK,mBAAmB,GAAGV,UAAU,CAACG,mBAAmB,CAAC;EAE3D,OAAQQ,EAAe,IAA2B;IAChD,MAAMJ,KAAK,GAAGC,WAAW,IAAIE,mBAAmB,EAAEH,KAAK;IAEvD,IAAI,CAACA,KAAK,EAAE;MACVN,YAAY,CAAC,gEAAgE,CAAC;MAE9E,OAAO,CAAC,CAAC;IACX;IAEA,IAAIQ,KAAK,EAAE;MACT,OAAOP,cAAc,CACnBE,kBAAkB,CAAC;QACjBG,KAAK;QACLI;MACF,CAAC,CACH,CAAC;IACH,CAAC,MAAM;MACL,OAAOP,kBAAkB,CAAC;QACxBG,KAAK;QACLI;MACF,CAAC,CAAC;IACJ;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/typescript/src/hook/useSx.d.ts

@@ -12,8 +12,9 @@ export type UseSxOptions = {
     styleType?: ThemedStyleType;
     transform?: StyleTransform;
     fallback?: StyleFallback;
+    cache?: boolean;
 };
-export declare const useSx: <S extends ViewStyle = ViewStyle, P extends Props = Props>(props?: P | null, { theme: optionTheme, styleType, transform, fallback, }?: UseSxOptions) => {
+export declare const useSx: <S extends ViewStyle = ViewStyle, P extends Props = Props>(props?: P | null, { theme: optionTheme, styleType, transform, fallback, cache, }?: UseSxOptions) => {
     getStyle: () => StyleProp<S> | undefined;
     filteredProps: Omit<P, keyof {
         flex: number | undefined;

package/lib/typescript/src/hook/useSx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSx.d.ts","sourceRoot":"","sources":["../../../../src/hook/useSx.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,KAAK,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,WAAW,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,KAAK,qEACR,CAAC,GAAG,IAAI,4DAMb,YAAY;oBAIwB,UAAU,CAAC,CAAC,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DhE,CAAC"}
+{"version":3,"file":"useSx.d.ts","sourceRoot":"","sources":["../../../../src/hook/useSx.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,KAAK,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,WAAW,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,KAAK,qEACR,CAAC,GAAG,IAAI,mEAOb,YAAY;oBAIwB,UAAU,CAAC,CAAC,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEhE,CAAC"}

package/lib/typescript/src/hook/useSxStyle.d.ts

@@ -3,6 +3,7 @@ import type { TextSxProps } from '../@types/SxProps';
 import type { ThemedDict } from '../@types/ThemedDict';
 export type UseSxStyleOptions = {
     theme?: ThemedDict;
+    cache?: boolean;
 };
-export declare const useSxStyle: ({ theme: optionTheme }?: UseSxStyleOptions) => (sx: TextSxProps) => StyleProp<TextStyle>;
+export declare const useSxStyle: ({ theme: optionTheme, cache }?: UseSxStyleOptions) => (sx: TextSxProps) => StyleProp<TextStyle>;
 //# sourceMappingURL=useSxStyle.d.ts.map

package/lib/typescript/src/hook/useSxStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSxStyle.d.ts","sourceRoot":"","sources":["../../../../src/hook/useSxStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAGF,eAAO,MAAM,UAAU,4BAA4B,iBAAiB,UAGtD,WAAW,KAAG,UAAU,SAAS,CAgB9C,CAAC"}
+{"version":3,"file":"useSxStyle.d.ts","sourceRoot":"","sources":["../../../../src/hook/useSxStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAGF,eAAO,MAAM,UAAU,mCAAmC,iBAAiB,UAG7D,WAAW,KAAG,UAAU,SAAS,CAuB9C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-styled-system/core",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "React Native Styled System",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -67,5 +67,5 @@
       "**/*.test.*"
     ]
   },
-  "gitHead": "9394bd04b9ed8d41ede9d52f2a973e439952fe7b"
+  "gitHead": "1b189c9a564f64eff637162378cb59e7610cf89e"
 }

package/src/hook/useSx.test.ts

@@ -20,19 +20,21 @@ function expectResult(
     styleType,
     transform,
     fallback,
+    cache,
   }: {
     expectation: object;
     filteredPropsExpectation?: object;
     styleType?: ThemedStyleType;
     transform?: StyleTransform;
     fallback?: StyleFallback;
+    cache?: boolean;
   },
 ) {
   const {
     result: {
       current: { getStyle, filteredProps },
     },
-  } = renderHook(() => useSx(props, { theme, styleType, transform, fallback }));
+  } = renderHook(() => useSx(props, { theme, styleType, transform, fallback, cache }));
 
   if (expectation) {
     expect(StyleSheet.flatten(getStyle())).toEqual(expectation);
@@ -362,6 +364,7 @@ describe('cache', () => {
       emptyTheme,
       { bg: 'red', mt: 2 },
       {
+        cache: true,
         expectation: { marginTop: 2, backgroundColor: 'red' },
       },
     );
@@ -370,6 +373,7 @@ describe('cache', () => {
       emptyTheme,
       { mt: 2, sx: { bg: 'red' } },
       {
+        cache: true,
         expectation: { marginTop: 2, backgroundColor: 'red' },
       },
     );

package/src/hook/useSx.ts

@@ -23,6 +23,7 @@ export type UseSxOptions = {
   styleType?: ThemedStyleType;
   transform?: StyleTransform;
   fallback?: StyleFallback;
+  cache?: boolean;
 };
 const defaultUseSxOptions: UseSxOptions = { styleType: 'ViewStyle' };
 export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
@@ -32,6 +33,7 @@ export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
     styleType = defaultUseSxOptions.styleType,
     transform = defaultUseSxOptions.transform,
     fallback,
+    cache,
   }: UseSxOptions = defaultUseSxOptions,
 ) => {
   const styledSystemContext = useContext(StyledSystemContext);
@@ -76,14 +78,22 @@ export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
     if (is.function(transform)) {
       const transformedSx = transform(StyleSheet.flatten(composedStyle));
 
-      return getCachedStyle(
-        StyleSheet.compose(
-          composedStyle,
-          propsToThemedStyle({ theme, sx: transformedSx, styleType }) as S,
-        ),
+      const ret = StyleSheet.compose(
+        composedStyle,
+        propsToThemedStyle({ theme, sx: transformedSx, styleType }),
       );
+
+      if (cache) {
+        return getCachedStyle(ret);
+      } else {
+        return ret as StyleProp<S>;
+      }
     } else {
-      return getCachedStyle(composedStyle);
+      if (cache) {
+        return getCachedStyle(composedStyle);
+      } else {
+        return composedStyle as StyleProp<S>;
+      }
     }
   });
 

package/src/hook/useSxStyle.ts

@@ -10,10 +10,11 @@ import { propsToThemedStyle } from '../util/propsToThemedStyle';
 
 export type UseSxStyleOptions = {
   theme?: ThemedDict;
+  cache?: boolean;
 };
 const defaultOptions: UseSxStyleOptions = {};
 
-export const useSxStyle = ({ theme: optionTheme }: UseSxStyleOptions = defaultOptions) => {
+export const useSxStyle = ({ theme: optionTheme, cache }: UseSxStyleOptions = defaultOptions) => {
   const styledSystemContext = useContext(StyledSystemContext);
 
   return (sx: TextSxProps): StyleProp<TextStyle> => {
@@ -25,11 +26,18 @@ export const useSxStyle = ({ theme: optionTheme }: UseSxStyleOptions = defaultOp
       return {};
     }
 
-    return getCachedStyle(
-      propsToThemedStyle({
+    if (cache) {
+      return getCachedStyle(
+        propsToThemedStyle({
+          theme,
+          sx,
+        }),
+      );
+    } else {
+      return propsToThemedStyle({
         theme,
         sx,
-      }),
-    );
+      });
+    }
   };
 };