How to set shadows in React Native for android?

Question

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

Answer 1

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