css-to-react-native icon indicating copy to clipboard operation
css-to-react-native copied to clipboard

Support for React Native 0.76 `boxShadow` and `filter`

Open wojtekmaj opened this issue 1 year ago • 1 comments

Since React Native 0.76, boxShadow and filter is supported (the latter partially). This means that, for example:

      <View
        style={{
          width: 50,
          height: 50,
          backgroundColor: 'gray',
          boxShadow: '5px 5px 5px red, -5px -5px 5px green',
          filter: 'opacity(0.5)',
        }}
      />

is absolutely legit:

Image

Unfortunately, attempting to recreate the same in styled-components, in css-to-react-native, this results in:

 (NOBRIDGE) ERROR  Warning: Error: Failed to parse declaration "boxShadow: 5px 5px 5px red, -5px -5px 5px green"

It is obvious we should support it. The catch is, of course, the above code is invalid in React Native below version 0.76, so it should be opt-in, until the next breaking release, I guess.

Documentation would also need to be updated, as that renders the following obsolete:

There is also support for the box-shadow shorthand, and this converts into shadow- properties. Note that these only work on iOS.

wojtekmaj avatar Nov 06 '24 17:11 wojtekmaj

Quick workaround for those in need:

diff --git a/index.js b/index.js
index 36200b3f1c5d419054107fa8dafdf2b7117437ae..e1ef410604820c38688e670a70c90f134f750063 100644
--- a/index.js
+++ b/index.js
@@ -693,7 +693,6 @@ var transforms = {
   borderColor: borderColor,
   borderRadius: borderRadius,
   borderWidth: borderWidth,
-  boxShadow: boxShadow,
   flex: flex,
   flexFlow: flexFlow,
   font: font,

wojtekmaj avatar Nov 06 '24 17:11 wojtekmaj