react-nativeshadow

How to set shadows in React Native for android?


Hi am trying to set a shadow for my fab but my attempts has failed so far i tried setting shadow props but that is for ios only so i tried to play with elevation property but it doesn't look right.

Here's what i tried

  <View
    style={{
      width: 56,
      height: 56,
      elevation: 2,
      borderRadius: 28,
      marginBottom: 3,
      backgroundColor: 'rgba(231,76,60,1)',
    }}
  ></View>

What i need to achieve

enter image description here


Solution

  • Adding the CSS property elevation: 1 renders shadow in Android without installing any 3rd party library.

    elevation is an Android-only style property available on the View elements.

    See: React Native Docs for the elevation style property


    If you're open to 3rd party software, another way to get shadows for android is to install react-native-shadow.

    Example (adapted from the readme):

    import React, { Component } from "react";
    import { TouchableHighlight } from "react-native";
    
    import { BoxShadow } from "react-native-shadow";
    
    export default class ShadowButton extends Component {
      render() {
        const shadowOpt = {
          width: 160,
          height: 170,
          color: "#000",
          border: 2,
          radius: 3,
          opacity: 0.2,
          x: 0,
          y: 3,
          style: { marginVertical: 5 }
        };
    
        return (
          <BoxShadow setting={shadowOpt}>
            <TouchableHighlight
              style={{
                position: "relative",
                width: 160,
                height: 170,
                backgroundColor: "#fff",
                borderRadius: 3,
                // marginVertical: 5,
                overflow: "hidden"
              }}
            >
              ...
            </TouchableHighlight>
          </BoxShadow>
        );
      }
    }