Add support for box-shadow and filter properties

React Native supports box-shadow and filter properties natively since version 0.76. This means that every version of React Native that is stil supported can benefit from box-shadow and filter properties.

Author: wojtekmaj

README.md

@@ -63,9 +63,10 @@ margin: 5px 7px 2px;
 }
 ```
 
-Shorthands will only accept values that are supported in React, so `background` will only accept a colour, `backgroundColor`
+Shorthands will only accept values that are supported in React Native, so `background` will only accept a colour, `backgroundColor` will not accept an image, and `font` will not accept font-variant values that React Native does not support.
 
-There is also support for the `box-shadow` shorthand, and this converts into `shadow-` properties. Note that these only work on iOS.
+React Native's `box-shadow` and `filter` properties are passed through as
+`boxShadow` and `filter`, so support depends on your React Native version.
 
 #### Shorthand Notes
 

src/__tests__/boxShadow.js

@@ -90,6 +90,32 @@ it('allows CSS custom properties to pass through', () => {
   expect(transformCss([['--my-prop', '0%']])).toEqual({ '--my-prop': '0%' })
 })
 
+it('passes filter through as a raw React Native property', () => {
+  expect(transformCss([['filter', 'opacity(0.5)']])).toEqual({
+    filter: 'opacity(0.5)',
+  })
+})
+
+it('passes multiple filter functions through unchanged', () => {
+  expect(transformCss([['filter', 'opacity(0.5) blur(5px)']])).toEqual({
+    filter: 'opacity(0.5) blur(5px)',
+  })
+})
+
+it('passes box-shadow through as a raw React Native property', () => {
+  expect(transformCss([['box-shadow', '10px 20px 30px red']])).toEqual({
+    boxShadow: '10px 20px 30px red',
+  })
+})
+
+it('passes multiple box-shadow values through unchanged', () => {
+  expect(
+    transformCss([['box-shadow', '5px 5px 5px red, -5px -5px 5px green']])
+  ).toEqual({
+    boxShadow: '5px 5px 5px red, -5px -5px 5px green',
+  })
+})
+
 it('allows percent in unspecialized transform', () => {
   expect(transformCss([['top', '0%']])).toEqual({ top: '0%' })
 })

src/__tests__/index.js

@@ -115,14 +115,11 @@ lengthUnits.forEach(unit => {
     })
   })
 
-  it('allows untis to be used with box-shadow', () => {
+  it('allows units to be used with box-shadow', () => {
     expect(
       transformCss([['box-shadow', `10px ${value} ${value} red`]])
     ).toEqual({
-      shadowOffset: { width: 10, height: value },
-      shadowRadius: value,
-      shadowColor: 'red',
-      shadowOpacity: 1,
+      boxShadow: `10px ${value} ${value} red`,
     })
   })
 })

src/__tests__/units.js

@@ -8,7 +8,6 @@ import {
 } from '../tokenTypes'
 import aspectRatio from './aspectRatio'
 import border from './border'
-import boxShadow from './boxShadow'
 import flex from './flex'
 import flexFlow from './flexFlow'
 import font from './font'
@@ -58,7 +57,6 @@ export default {
   borderColor,
   borderRadius,
   borderWidth,
-  boxShadow,
   flex,
   flexFlow,
   font,