Odtnhj

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

UPDATE

Adding css property elevation: 1 renders shadow in Android without installing any 3rd party library. See other answers.

--

One way to get shadows for android is to install react-native-shadow

Example from the readme:

import React, Component from 'react' import 
 StyleSheet,
 View,
 Text,
 ScrollView,
 Image,
 TouchableHighlight from 'react-native'

import BoxShadow from 'react-native-shadow'

export default class VideoCell 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>
 )
 

Another solution without using a third-party library is using elevation.

Pulled from react-native documentation.
https://facebook.github.io/react-native/docs/view.html

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

elevation will go into the style property and it can be implemented like so.

<View style= elevation: 2 >
 children
</View>

The higher the elevation, the bigger the shadow. Hope this helps!

You can try

//ios 
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: 
 height: 0,
 width: 0
,
//android
elevation: 1

Just use 'elevation' property to get shadow in android. something like below

const Header = () => 
 // const textStyle, viewStyle = styles;
 return (
 <View style=styles.viewStyle> 
 <Text style=styles.textStyle>Albums</Text>
 </View>
 )



const styles = 
 viewStyle:
 backgroundColor:'#f8f8f8',
 justifyContext:'center',
 alignItems: 'center',
 padding:16,
 elevation: 2
 

The following will help you to give each Platform the styling you want:

import Text, View, Platform from 'react-native';

......
<View style=styles.viewClass></View>
......


const styles = 
viewClass: 
 justifyContent: 'center',
 alignItems: 'center',
 height: 60,
 ...Platform.select(
 ios: 
 shadowColor: '#000',
 shadowOffset: width: 0, height: 2 ,
 shadowOpacity: 0.2,
 ,
 android: 
 elevation: 1

 ,
 ),

;

for an android screen you can use this property elevation.

for example :

 HeaderView:
 backgroundColor:'#F8F8F8',
 justifyContent:'center',
 alignItems:'center',
 height:60,
 paddingTop:15,

 //Its for IOS
 shadowColor: '#000',
 shadowOffset: width: 0, height: 2 ,
 shadowOpacity: 0.2,

 // its for android 
 elevation: 5,
 position:'relative',

,