How to add box-shadow for React-native?

[jasan-s]

in essence:

shadowOffset:{  width: 10,  height: 10,  },
shadowColor: 'black',
shadowOpacity: 1.0,

[k15a]

Just like normal CSS: https://developer.mozilla.org/de/docs/Web/CSS/box-shadow

const BoxShadow = styled.div`
  box-shadow: 10px 5px 5px black;
`

[jasan-s]

@k15a I forgot to add that this is on react-native

[mxstbr]

/cc @jacobp100 we should write some docs specifically for ReactNative on the new website. https://github.com/styled-components/styled-components-website

[jasan-s]

For some reason @k15a @mxstbr the following two give me different results in terms of styling(equivalent property values):

const styles = StyleSheet.create({
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10,
  }
})

const StyledView = styled.View`
  border-width: 1;
  border-radius: 2;
  border-color: #ddd;
  border-bottom-width: 0;
  shadow-color: #000;
  shadow-offset: {width: 0, height: 2};
  shadow-opacity: 0.8;
  shadow-radius: 2;
  elevation: 1;
  margin-left: 5;
  margin-right: 5;
  margin-top: 10;
`

NOTICE THE DIFFERENT PLACEMENT OF SHADOW using styled-components the shadow is on top:

[jacobp100]

You can use shadow-offset: 5 10 where the values are width and height, respectively. In v2, you'll need to add units to those values.

I think you got the rest!

@mxstbr I'll submit some stuff later tonight! We should be able to take a load from here.

[guysegal]

These props are relevant only to iOS right?

shadow-color, shadow-offset, shadow-opacity, shadow-radius

Will they work on Android?

[kitten]

@guysegal they won't since shadows are not supported on RN Android. But you can use elevation

[pie6k]

<View
      style={{
        shadowOpacity: 0.75,
        shadowRadius: 5,
        shadowColor: 'red',
        shadowOffset: { height: 0, width: 0 },
      }}
    >

[ColinFendrick]

Is this working? Trying to put some shadow on a view with the exact same above code and nothing is happening.

[jacobp100]

It only works for iOS IIRC

[ColinFendrick]

We're building React Native for iOS and it's not showing up.

[jacobp100]

Does it work with the native StyleSheet.create?

[kitten]

@ColinFendrick Does this definitely not work for you?

styled.View`
  shadow-opacity: 0.75;
  shadow-radius: 5px;
  shadow-color: red;
  shadow-offset: 0px 0px;
`

[ColinFendrick]

Figured out the problem. overflow: hidden; will ofc turn that box shadow off. Thanks.

[ikhattab]

This isn't working for me, I tried to add:

box-shadow: 10px 5px 5px black;

but it gives me the following warning:

Error:  Error: "boxShadow" is not a valid style property.
StyleSheet generated: {
  "borderBottomWidth": 1,
  "borderBottomColor": "#ebebeb",
  "display": "flex",
  "flexDirection": "row",
  "alignItems": "center",
  "backgroundColor": "#fff",
  "boxShadow": "10px 5px 5px black"
}

[jacobp100]

@mxstbr @philpl Do we want to try and support a translation from box-shadow to various shadow-* properties?

[kitten]

@jacobp100 Yes! I'd love that ❤️ 😄

[dakdreams]

my emulator is android but the shadow props dont work!!!

[k15a]

@dakdreams AFAIK android doesn't support shadows.

Try elevation:

(Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

[RyanWarner]

As @jasan-s pointed out, the shadows seem to be on the top instead of the bottom of the View. Any way around this?

[redbar0n]

Upvote here: https://react-native.canny.io/feature-requests/p/shadow-does-not-appear-if-overflow-hidden-is-set-on-ios

[Nemesis30G]

I tried this
shadowOffset:{ width: 10, height: 10, },
shadowColor: 'black',
shadowOpacity: 1.0,

but I have some text inside the view and it make the text have shadow too, any way around this?

[SSTPIERRE2]

I just tried wrapping a scrollview with text in a view styled with shadow props, but as @Nemesis30G said the shadow actually applied to the text inside the scrollview as well as the borders of the view.

[jacobp100]

Set a background colour on the scrollview

[risingagain]

This is different than CSS style.

[risingagain]

Inset is not working.

[jacobp100]

inset is not supported by React native

[Karniej]

The issue with shadowOffset should be documented a little bit better. The only way to work with shadowOffset on React Native was by using the shorthand property
boxShadow: 1px 10px 10px black

[LetsNurtureGit]

elevation:4,
shadowOffset: { width: 5, height: 5 },
shadowColor: "grey",
shadowOpacity: 0.5,
shadowRadius: 10,

Dont forget to put margin and padding efficiently as the shadows wont fall out of the container view in android.. However in iOS it shudn't be an issue

[rickardinho]

So is anybody going to answer why shadows are appearing on top on IOS, no matter what the shadowOffset properties, as @jasan-s pointed out?

[rajnishcoder]

elevation:4,
shadowOffset: { width: 5, height: 5 },
shadowColor: "grey",
shadowOpacity: 0.5,
shadowRadius: 10,

Dont forget to put margin and padding efficiently as the shadows wont fall out of the container view in android.. However in iOS it shudn't be an issue

all above solutions doesn't worked in android but this works!!! 😃

[Kishanjvaghela]

try this https://www.npmjs.com/package/react-native-cardview

[skhetcho]

Just like normal CSS: https://developer.mozilla.org/de/docs/Web/CSS/box-shadow

const BoxShadow = styled.div`
  box-shadow: 10px 5px 5px black;
`

what is this syntax @k15a
as we are used to with react native to have:

style: {
     //some react native css info
}

[bradennapier]

This seems to be working fine for me:

const IconImage = styled.Image`
  height: 30px;
  width: 30px;
  shadow-color: #000;
  shadow-offset: 1px 1px;
  shadow-opacity: 0.5;
  shadow-radius: 2px;
`;

[jacoblukose]

I tried this
shadowOffset:{ width: 10, height: 10, },
shadowColor: 'black',
shadowOpacity: 1.0,

but I have some text inside the view and it make the text have shadow too, any way around this?

Hi is there a solution for this ? All my inner view elements ( text , image ) are also havings shadows

[LetsNurtureGit]

elevation:4,
shadowOffset: { width: 5, height: 5 },
shadowColor: "grey",
shadowOpacity: 0.5,
shadowRadius: 10,
Dont forget to put margin and padding efficiently as the shadows wont fall out of the container view in android.. However in iOS it shudn't be an issue

all above solutions doesn't worked in android but this works!!! 😃

thanks