New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not able to set ShadowColor in Android #17226

BhavanPatel opened this Issue Dec 15, 2017 · 13 comments


None yet
Copy link

BhavanPatel commented Dec 15, 2017

Is this a bug report?


Have you read the Contributing Guidelines?



OS: macOS High Sierra 10.13.1
Node: 8.9.1
Yarn: 0.17.10
npm: 5.6.0
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0

Steps to Reproduce

  1. Run this code
import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
class App extends Component {
  render() {
    return (<View style={styles.container}>
        <TouchableOpacity style={[styles.boxShadow, shadow]}>
          <Text style={styles.text}>LOGIN</Text>
const shadow = {
  shadowColor: '#30C1DD',
  shadowRadius: 10,
  shadowOpacity: 0.6,
  elevation: 8,
  shadowOffset: {width: 0,height: 4}
const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  boxShadow: {
    width: 200,
    height: 50,
    borderRadius: 10,
    backgroundColor: '#ed7171',
    justifyContent: 'center',
    alignItems: 'center'
  text: {
    color: '#ffffff'
export default App;

Expected Behavior

Is there way to achieve like this Shadow in Android

shadow Props of react-native only supports in iOS

  • color can be changed
  • Tried elevation but can not change default greyed color
  • able to achieve in ios with shadowColor props but not in android as it is only support iOS

Actual Behavior

See sample code and preview.
It should be work for android too.
Shadow color is always grey however I tried to change.
Please make support for android too.

Reproducible Demo

This is sample snapshot
screen shot 2017-12-15 at 4 56 54 pm


This comment has been minimized.

Copy link

mostafa69d commented Jan 17, 2018

I have the same problem right now and still couldn't find any solution by using react-native available features :(


This comment has been minimized.

Copy link

towfiqi commented Jan 25, 2018

Not a bug. You cannot set Eleveation Color in Android:

Instead of using Elevation you can try this React Native Shadow library which uses svg to produce shadow that let you set color, offset, opacity:


This comment has been minimized.

Copy link

react-native-bot commented Feb 24, 2018

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

How to ContributeWhat to Expect from Maintainers


This comment has been minimized.

Copy link

BhavanPatel commented Feb 25, 2018

@towfiqi I dont want to use any third party library for shadow so I can not use anything which is out of react-native ... and Yes there is no support for android shadowColor in react-native thats why I asked you I tried elevation props but it will stick to gray color as I mentioned in my issue....

Dont know why rn-bot close this!


This comment has been minimized.

Copy link

mostafa69d commented Feb 25, 2018

@BhavanPatel: Did you update your react-native to latest version? The problem supposed to be solved in the updated version.


This comment has been minimized.

Copy link

BhavanPatel commented Mar 2, 2018

I tried with react-native version 0.54.0 still issue is persist.


This comment has been minimized.

Copy link

workadev commented May 3, 2018

Try adding elevation for Android.


This comment has been minimized.

Copy link

Rish02Sharma commented May 28, 2018

Hey @BhavanPatel ,
I have been looking for this and found android doesnt support 'shadow' of components besides it has elevation tag like for eg:
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
elevation: 4
paddingTop: 15,
In android we can also set our desired color by making a view with background drawable.


This comment has been minimized.

Copy link

pushpendra65 commented Jul 9, 2018

@react-native-bot this issue is still there on Android.


This comment has been minimized.

Copy link

martaHazda commented Oct 4, 2018

@react-native-bot the issue is not fixed. I am using 55.4 version of react-native.


This comment has been minimized.

Copy link

waveChand commented Oct 18, 2018

@react-native-bot issue is still there 57.0


This comment has been minimized.

Copy link

ikosar commented Nov 28, 2018



This comment has been minimized.

Copy link

SangeetManghnani commented Nov 28, 2018

One hack is to create a view and give it the styles that you wish to give to the shadow and set marginTop negative so that it pushes up to the actual component, and some part of it shows up like a shadow, I had to create a button and applied these styles:


<View style={GameStartStyles.startButtonContainer}>
    <View style={GameStartStyles.startButtonWrapper}>
      <Text style={GameStartStyles.welcome}>Start</Text>
 <View style={GameStartStyles.startButtonShadow}></View>

      marginTop: 80,
    startButtonWrapper: {
      padding: 10,
      width: 200, 
      backgroundColor: '#27AE60',
      borderRadius: 7,
      zIndex: 1,
      padding: 20, 
      backgroundColor: '#196F3D',
      marginTop: -30,
      marginLeft: 5,
      borderRadius: 7,
      width: 195,

This is the end result:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment