rn-css 1.10.1 → 1.10.3

package/dist/convertStyle.js

@@ -41,8 +41,8 @@ const convertStyle = (rnStyle, units) => {
                 height: (0, convertUnits_1.convertValue)(key, rnStyle.textShadowOffset.height || '0', units)
             };
         }
-        // Font family should not be transformed (same as cursor for web in case of base64 value)
-        else if (['cursor', 'fontFamily'].includes(key)) {
+        // Font family should not be transformed (same as cursor for web in case of base64 value, and boxShadow/textShadow for web)
+        else if (['cursor', 'fontFamily', 'boxShadow', 'textShadow'].includes(key)) {
             convertedStyle[key] = value;
         }
         else {

package/dist/cssToRN/index.js

@@ -126,8 +126,12 @@ function cssChunkToStyle(css) {
                 break;
             case 'boxShadow':
             case 'textShadow':
+                // To provide support for the 4th element (spread-radius) at least for web
+                if (react_native_1.Platform.OS === 'web')
+                    Object.assign(result, { [key]: value });
                 // We need to replace boxShadow by shadow
-                Object.assign(result, (0, convert_1.shadow)(key === 'boxShadow' ? 'shadow' : key, value));
+                else
+                    Object.assign(result, (0, convert_1.shadow)(key === 'boxShadow' ? 'shadow' : key, value));
                 break;
             // Other keys don't require any special treatment
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "scripts": {
     "test": "jest",
     "prepare": "rm -rf dist && tsc",

package/src/convertStyle.tsx

@@ -42,8 +42,8 @@ const convertStyle = <T extends AnyStyle | Animated.WithAnimatedValue<AnyStyle>
         height: convertValue(key, rnStyle.textShadowOffset!.height || '0', units) as number
       }
     }
-    // Font family should not be transformed (same as cursor for web in case of base64 value)
-    else if (['cursor', 'fontFamily'].includes(key)) {
+    // Font family should not be transformed (same as cursor for web in case of base64 value, and boxShadow/textShadow for web)
+    else if (['cursor', 'fontFamily', 'boxShadow', 'textShadow'].includes(key)) {
       convertedStyle[key as 'fontFamily'] = value
     }
     else {

package/src/cssToRN/index.ts

@@ -1,4 +1,4 @@
-import { Dimensions } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
 import convertStyle from '../convertStyle'
 import { CompleteStyle, Context, PartialStyle, Style, Units } from '../types'
 import { sideValue, border, borderLike, cornerValue, font, textDecoration, shadow, placeContent, flex, flexFlow, transform, background } from './convert'
@@ -123,8 +123,10 @@ function cssChunkToStyle (css: string) {
         break
       case 'boxShadow':
       case 'textShadow':
+        // To provide support for the 4th element (spread-radius) at least for web
+        if (Platform.OS === 'web') Object.assign(result, { [key]: value })
         // We need to replace boxShadow by shadow
-        Object.assign(result, shadow(key === 'boxShadow' ? 'shadow' : key, value))
+        else Object.assign(result, shadow(key === 'boxShadow' ? 'shadow' : key, value))
         break
       // Other keys don't require any special treatment
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment