rn-css 1.6.7 → 1.6.8

package/dist/features.js

@@ -68,7 +68,7 @@ const useLayout = (onLayout, needsLayout) => {
 exports.useLayout = useLayout;
 /** Apply the new fontSize to the component before we can calculate em units */
 const useFontSize = (fontSizeTarget, rem, em) => {
-    const [fontSize, fontUnit] = react_1.default.useMemo(() => fontSizeTarget === undefined ? [fontSizeTarget] : (0, convertUnits_1.parseValue)(fontSizeTarget), [fontSizeTarget]);
+    const [fontSize, fontUnit] = react_1.default.useMemo(() => fontSizeTarget === undefined ? [] : (0, convertUnits_1.parseValue)(fontSizeTarget), [fontSizeTarget]);
     const isRelative = fontUnit && ['rem', 'em', '%'].includes(fontUnit);
     const newSize = react_1.default.useMemo(() => {
         if (fontSize && isRelative) {

package/dist/styleComponent.js

@@ -79,16 +79,17 @@ const styled = (Component) => {
             const units = react_1.default.useMemo(() => ({ ...baseUnits, em }), [baseUnits, em]);
             const styleConvertedFromCSS = react_1.default.useMemo(() => (0, convertStyle_1.default)(finalStyle, units), [finalStyle, units]);
             const style = react_1.default.useMemo(() => [styleConvertedFromCSS, props.style], [props.style, styleConvertedFromCSS]);
+            const flatStyle = react_1.default.useMemo(() => react_native_1.StyleSheet.flatten(style), [style]);
             const newProps = react_1.default.useMemo(() => {
                 const newProps = { style, onMouseEnter, onMouseLeave, onLayout };
-                if (react_native_1.StyleSheet.flatten(style).textOverflow === 'ellipsis')
+                if (flatStyle.textOverflow === 'ellipsis')
                     Object.assign(newProps, { numberOfLines: 1 });
                 return newProps;
-            }, [onLayout, onMouseEnter, onMouseLeave, style]);
+            }, [flatStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, style]);
             // The lines below can improve perfs, but it causes the component to remount when the font size changes
             // const currentFontSize = React.useContext(FontSizeContext)
             // if (em !== currentFontSize) {
-            if (style.fontSize) {
+            if (flatStyle.fontSize) {
                 return react_1.default.createElement(exports.FontSizeContext.Provider, { value: em },
                     react_1.default.createElement(Component, { ref: ref, ...props, ...newProps }));
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/features.tsx

@@ -59,7 +59,7 @@ export const useLayout = (onLayout: undefined | ((event: LayoutChangeEvent) => v
 
 /** Apply the new fontSize to the component before we can calculate em units */
 export const useFontSize = (fontSizeTarget: string | undefined, rem: number, em: number): { em: number } => {
-  const [fontSize, fontUnit] = React.useMemo(() => fontSizeTarget === undefined ? [fontSizeTarget] : parseValue(fontSizeTarget), [fontSizeTarget])
+  const [fontSize, fontUnit] = React.useMemo(() => fontSizeTarget === undefined ? [] : parseValue(fontSizeTarget), [fontSizeTarget])
   const isRelative = fontUnit && ['rem', 'em', '%'].includes(fontUnit)
   const newSize = React.useMemo(() => {
     if (fontSize && isRelative) {

package/src/styleComponent.tsx

@@ -91,16 +91,17 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
 
       const styleConvertedFromCSS = React.useMemo(() => convertStyle(finalStyle, units), [finalStyle, units])
       const style: StyleProp<any> = React.useMemo(() => [styleConvertedFromCSS, props.style], [props.style, styleConvertedFromCSS])
+      const flatStyle = React.useMemo(() => StyleSheet.flatten(style), [style])
       const newProps = React.useMemo(() => {
         const newProps: OptionalProps = { style, onMouseEnter, onMouseLeave, onLayout }
-        if (StyleSheet.flatten(style).textOverflow === 'ellipsis') Object.assign(newProps, { numberOfLines: 1 })
+        if (flatStyle.textOverflow === 'ellipsis') Object.assign(newProps, { numberOfLines: 1 })
         return newProps
-      }, [onLayout, onMouseEnter, onMouseLeave, style])
+      }, [flatStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, style])
 
       // The lines below can improve perfs, but it causes the component to remount when the font size changes
       // const currentFontSize = React.useContext(FontSizeContext)
       // if (em !== currentFontSize) {
-      if (style.fontSize) {
+      if (flatStyle.fontSize) {
         return <FontSizeContext.Provider value={em}>
           <Component ref={ref} {...props} {...newProps} />
         </FontSizeContext.Provider>