Not able to set ShadowColor in Android

[BhavanPatel]

Is this a bug report?

yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
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}>
      <View>
        <TouchableOpacity style={[styles.boxShadow, shadow]}>
          <Text style={styles.text}>LOGIN</Text>
        </TouchableOpacity>
      </View>
    </View>);
  }
}
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

as
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

[mostafa-drz]

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

[towfiqi]

Not a bug. You cannot set Eleveation Color in Android:
https://stackoverflow.com/questions/39514252/how-to-set-elevation-color

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:
https://www.npmjs.com/package/react-native-shadow

[react-native-bot]

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 Contribute • What to Expect from Maintainers}

[BhavanPatel]

@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!

[mostafa-drz]

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

[BhavanPatel]

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

[workadev]

Try adding elevation for Android.

[Rish02Sharma]

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.

[pushpendra65]

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

[spacerCode]

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

[waveChand]

@react-native-bot issue is still there 57.0

[loverdeveloper]

+1

[SangeetManghnani]

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:

##Component:

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

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

This is the end result: