How do I render a shadow?

Question

How do I render a shadow on a View? I've tried many combinations of shadowColor, shadowOffset, shadowOpacity, and shadowRadius, which seem to do nothing. I am sure the style is applied correctly, since other attributes I've set work.

I have the same problem. An issue (https://github.com/facebook/react-native/issues/414) was created and closed. I assume the more info would come to the official doc. — wangii, Mar 29 '15 at 08:18

Ashok R · Answer 1 · 2019-06-13T02:57:04.973

I am using React-Native 0.40 and below code works for me both on IOS and Android.

(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.

 class MainApp extends Component {
  render() {
    return (
      <View style={styles.container}>

        <View elevation={5} style={styles.buttonContainer}>
          <Text style={styles.textStyle}>Shadow Applied</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  textStyle: {
    color: '#FFFFFF'
  },
  buttonContainer: {
    backgroundColor: '#2E9298',
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 5,
    shadowOpacity: 1.0
  }
})

Tested on iPhone.

Edit

Comment from @ James. Thanks.

Note: For those on android, the backgroundColor is critical. I was using View as a container for another element and couldn't get a shadow until I specified a background color.

For those on android, the backgroundColor is critical. I was using View as a container for another element and couldn't get a shadow until I specified a background color. — James, Feb 28 '18 at 20:34

score 32 · Answer 2 · answered Mar 14 '16 at 06:48

32

Use elevation to implement shadows on RN Android. Added elevation prop #27

<View elevation={5}> </View>

answered Mar 14 '16 at 06:48

Karthick Kumar

1,217
1
25
38

2

Now you can set it as a style http://facebook.github.io/react-native/releases/0.26/docs/view.html#style – Charlires May 25 '16 at 23:57
3

it doesnt support android version < 5.0 – Damathryx Sep 02 '16 at 05:43
1

unfortunately there is no easy way to implement that in android < 5.0. check with this issue https://github.com/facebook/react-native/issues/2768 – Karthick Kumar Sep 02 '16 at 08:40
1

Doesn't do anything on RN 42. – shinzou Aug 28 '17 at 16:57

wangii · Accepted Answer · 2015-03-31T08:27:58.763

20

It appears to be a bug in React native that shadowOpacity is set to type CGFloat instead of float according to CALayer doc. use iPhone 5 simulator before it's fixed. (CGFloat is float in older devices. )

The React Native issue which is tracking this is:

https://github.com/facebook/react-native/issues/449

edited Mar 31 '15 at 08:27

answered Mar 29 '15 at 22:26

wangii

2,570
1
22
29

If you think it is a bug, file a radar at http://bugreport.apple.com with an example that illustrates the point. – Jeremy Huddleston Sequoia Mar 30 '15 at 03:59
Just tested this in the iPhone 4s simulator and the shadows work like a charm :) – Christian Strang Mar 30 '15 at 16:44

score 17 · Answer 4 · answered May 25 '17 at 05:40

    viewStyle : {
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    paddingTop: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    marginBottom: 10,
    elevation: 2,
    position: 'relative'
},

Use marginBottom: 10

score 11 · Answer 5 · edited Oct 13 '17 at 00:46

You have to give elevation prop to View

<View elevation={5} style={styles.container}>
   <Text>Hello World !</Text>
 </View>

styles can be added like this:

 const styles = StyleSheet.create({

     container:{
        padding:20,
        backgroundColor:'#d9d9d9',
        shadowColor: "#000000",
        shadowOpacity: 0.8,
        shadowRadius: 2,
        shadowOffset: {
          height: 1,
          width: 1
        }
       },
   })

score 8 · Answer 6 · answered Oct 09 '17 at 06:52

  panel: {
    // ios
    backgroundColor: '#03A9F4',
    alignItems: 'center', 
    shadowOffset: {width: 0, height: 13}, 
    shadowOpacity: 0.3,
    shadowRadius: 6,

    // android (Android +5.0)
    elevation: 3,
  }

or you can use react-native-shadow for android

score 7 · Answer 7 · edited Jan 09 '19 at 13:32

All About margins

this works in Android, but did not test it in ios

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { View, Platform } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'

const styles = EStyleSheet.create({
    wrapper: {
        margin: '-1.4rem'
    },
    shadow: {
        padding: '1.4rem',
        margin: '1.4rem',
        borderRadius: 4,
        borderWidth: 0,
        borderColor: 'transparent',
        ...Platform.select({
            ios: {
                shadowColor: 'rgba(0,0,0, 0.4)',
                shadowOffset: { height: 1, width: 1 },
                shadowOpacity: 0.7,
                shadowRadius: '1.4rem'
            },
            android: {
                elevation: '1.4rem'
            }
        })
    },
    container: {
        padding: 10,
        margin: '-1.4rem',
        borderRadius: 4,
        borderWidth: 0,
        borderColor: '#Fff',
        backgroundColor: '#fff'
    }
})

class ShadowWrapper extends PureComponent {
    static propTypes = {
        children: PropTypes.oneOfType([
            PropTypes.element,
            PropTypes.node,
            PropTypes.arrayOf(PropTypes.element)
        ]).isRequired
    }

    render () {
        return (
            View style={styles.wrapper}
                View style={styles.shadow}
                    View style={styles.container}
                        {this.props.children}
                    View
                View
            View
        )
    }
}

export default ShadowWrapper

Passing string value to elevation will through error similar to Invalid prop `elevation` of type `string` supplied. expected `number' — Jacob Nelson, Jul 24 '18 at 06:37
this because: import EStyleSheet from 'react-native-extended-stylesheet' — Denis Zaitsev, Jul 25 '18 at 07:06

score 5 · Answer 8 · answered Jun 22 '19 at 10:28

by styled component

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;     
`

or by styles

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,
  }
})

please use this if you want to shadow same in ios and android library https://www.npmjs.com/package/react-native-shadow android shadow behavior different . — Naved Khan, Jan 29 '21 at 05:39

score 0 · Answer 9 · edited Jun 20 '20 at 09:12

I'm using Styled Components and created a helper function for myself.

It takes the given Android elevation and creates a fairly equivalent iOS shadow.

stylingTools.js

import { css } from 'styled-components/native';

/*
 REMINDER!!!!!!!!!!!!!
 Shadows do not show up on iOS if `overflow: hidden` is used.
 https://react-native.canny.io/feature-requests/p/shadow-does-not-appear-if-overflow-hidden-is-set-on-ios
*/

// eslint-disable-next-line import/prefer-default-export
export const crossPlatformElevation = (elevation: number = 0) => css`
  /* Android - native default is 4, we're setting to 0 to match iOS. */
  elevation: ${elevation};

  /* iOS - default is no shadow. Only add if above zero */
  ${elevation > 0
    && css`
      shadow-color: black;
      shadow-offset: 0px ${0.5 * elevation}px;
      shadow-opacity: 0.3;
      shadow-radius: ${0.8 * elevation}px;
    `}
`;

To use

import styled from 'styled-components/native';
import { crossPlatformElevation } from "../../lib/stylingTools";

export const ContentContainer = styled.View`
  background: white;
  ${crossPlatformElevation(10)};
`;

How do I render a shadow?

9 Answers9

stylingTools.js

To use

Linked