styled-components / css-to-react-native

Convert CSS text to a React Native stylesheet object

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

box-shadow is not transformed for Android

hosseinalipour opened this issue · comments

commented

Styled-component documentation state that this repo is responsible for making the transformation. I wanted box-shadow and according to react-native documentation, elevation is the correct way to get box-shadow on android, but, it's not generated in the first place, so I create the issue here.

let transform = require("css-to-react-native").default
transform([
  ['box-shadow', '4px 4px 5px #000']
]); 
Object {shadowColor: "#000" , shadowOffset: Object {height: 4, width: 4}, shadowOpacity: 1, shadowRadius: 5}
commented

also, I don't see any version requirement for the repo, I wonder if I'm using newer/older version of react-native?

There's not a way to transform a box shadow into an elevation (or vice-versa).

You could define both a box shadow and a similar elevation to support iOS and Android

For posterity,

iOS only supports a single box shadow. The elevation property on Android renders multiple, layered box shadows, so it's not possible to represent an elevation on iOS

And Android only supports pre-specified box shadows via elevation, and it's not possible to arbitrary box shadow parameters like in iOS

Anything we added here would be wrong on one platform, so I just stayed clear of it. Hope this makes sense!

commented

thank you for your precise response. I was thinking there should be at least a warning for developers because it has not even been mentioned in the docs.

Yeah, documentation for this package would definitely be useful