Skip to content

Support for React Native 0.76 boxShadow and filter #195

Open
@wojtekmaj

Description

@wojtekmaj

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions