Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for React Native 0.76 boxShadow and filter #195

Open
wojtekmaj opened this issue Nov 6, 2024 · 1 comment
Open

Support for React Native 0.76 boxShadow and filter #195

wojtekmaj opened this issue Nov 6, 2024 · 1 comment

Comments

@wojtekmaj
Copy link

wojtekmaj commented Nov 6, 2024

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
Copy link
Author

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,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants