How to set shadows in React Native for android?
React NativeReact Native-AndroidShadowReact Native Problem Overview
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
React Native Solutions
Solution 1 - React Native
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>
);
}
}
Solution 2 - React Native
The elevation style property on Android does not work unless backgroundColor has been specified for the element.
Android - elevation style property does not work without backgroundColor
Example:
{
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2},
shadowRadius: 10,
elevation: 3,
backgroundColor: 'white'
}
Solution 3 - React Native
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!
Solution 4 - React Native
You can try
//ios
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: {
height: 0,
width: 0
},
//android
elevation: 1
Solution 5 - React Native
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
},
}),
}
};
Solution 6 - React Native
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',
},
Solution 7 - React Native
You can use my react-native-simple-shadow-view
- This enables almost identical shadow in Android as in iOS
- No need to use elevation, works with the same shadow parameters of iOS (shadowColor, shadowOpacity, shadowRadius, offset, etc.) so you don't need to write platform specific shadow styles
- Can be used with semi-transparent views
- Supported in android 18 and up
Solution 8 - React Native
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
}
}
Solution 9 - React Native
I added borderBottomWidth: 0 and it worked fine for me in android.
Solution 10 - React Native
Also i'd like to add that if one's trying to apply shadow in a TouchableHighlight Component in which child has borderRadius, the parent element (TouchableHighlight) also need the radius set in order to elevation prop work on Android.
Solution 11 - React Native
I have implemented CardView for react-native with elevation, that support android(All version) and iOS. Let me know is it help you or not. https://github.com/Kishanjvaghela/react-native-cardview
import CardView from 'react-native-cardview'
<CardView
cardElevation={2}
cardMaxElevation={2}
cornerRadius={5}>
<Text>
Elevation 0
</Text>
</CardView>
Solution 12 - React Native
In short, you can't do that in android, because if you see the docs about shadow only Support IOS see doc
The best option you can install 3rd party react-native-shadow
Solution 13 - React Native
Generating shadows for a circle, react native, android
Based on the answers here, and on text that I found in github (react-native-shadow), I made few tests and thought that some people may find the following helpful.
- The tests are on a circular button
- The environment: Windows 10 PC, react-native using react-native-shadow (which doesn't work well for a circle) and react-native's elevation parameter (https://facebook.github.io/react-native/docs/view-style-props#elevation) with different values, running on an android emulator (genymotion)
Here is how the screen looks like:
Code:
import React, { Component } from 'react';
import { View, TouchableHighlight, Text } from 'react-native';
import { BoxShadow } from 'react-native-shadow'
export default class ShadowsTest extends Component {
render() {
const shadowOpt = {
width: 100,
height: 100,
color: "#000",
border: 2,
radius: 50,
opacity: 0.8,
x: 3,
y: 3,
//style: { marginVertical: 5 }
}
return (
<View style={{ flex: 1 }}>
<Header
text={"Shadows Test"} />
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 0.8,
borderColor: '#000',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden" }}>
<Text style={{ textAlign: 'center' }}>
0: plain border
</Text>
</TouchableHighlight>
</View>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<BoxShadow setting={ shadowOpt }>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden" }}>
<Text style={{ textAlign: 'center' }}>
1: RN shadow package
</Text>
</TouchableHighlight>
</BoxShadow>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
shadowOffset: { width: 15, height: 15 },
shadowColor: "black",
shadowOpacity: 0.9,
shadowRadius: 10,
}}>
<Text style={{ textAlign: 'center' }}>
2: vanilla RN: shadow (may work on iOS)
</Text>
</TouchableHighlight>
</View>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
elevation: 15,
}}>
<Text style={{ textAlign: 'center' }}>
3: vanilla RN: elevation only (15)
</Text>
</TouchableHighlight>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center', marginBottom: 30 }}>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
elevation: 5,
}}>
<Text style={{ textAlign: 'center' }}>
4: vanilla RN: elevation only (5)
</Text>
</TouchableHighlight>
</View>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
elevation: 50,
}}>
<Text style={{ textAlign: 'center' }}>
5: vanilla RN: elevation only (50)
</Text>
</TouchableHighlight>
</View>
</View>
</View>
)
}
}
Solution 14 - React Native
For some reason it only worked for my by adding borderColor: 'transparent' (or any other color). My style output looks like this:
{
borderColor: "transparent", // Required to show shadows on Android for some reason !?!?
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0.3,
shadowRadius: 5,
elevation: 15,
}
Solution 15 - React Native
elevation still no work in Expo v30 && React-native v0.55.4. I have tried the all answers here.
Also, don't try react-native-shadow - their shadow rendering is terrible. So, I am continuing the research.
Solution 16 - React Native
Set elevation: 3 and you should see the shadow in bottom of component without a 3rd party lib. At least in RN 0.57.4
Solution 17 - React Native
I had the same problem shadow/elevation not showing on Android with elevation:2. Then i noticed that the view element is fool width, so I added margin:2 to the view element and elevation properly appeared.
Style:
margin: 2,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2
Android:
iOS:
Solution 18 - React Native
A simple solution is this one!
Click here to see preview of simple drop shadow
Does not flicker when rendering collapse elements:
const styles = {
simpleShadow: {
borderTopWidth: 0.5,
borderRightWidth: 1,
borderBottomWidth: 1,
borderLeftWidth: 0.5,
borderTopColor: 'rgba(0,0,0,0.1)',
borderRightColor: 'rgba(0,0,0,0.2)',
borderBottomColor: 'rgba(0,0,0,0.2)',
borderLeftColor: 'rgba(0,0,0,0.1)',
backgroundColor: 'white',
margin: 10,
padding: 10,
borderRadius: 10
}
}
return (
<View style={styles.simpleShadow}>
<Text>Simple Shadow</Text>
</View>
);