Not able to set ShadowColor in react-native android

Bhavan Patel picture Bhavan Patel · Dec 16, 2017 · Viewed 13.8k times · Source

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: (installed)

    • react: 16.0.0
    • react-native: 0.51.0

Steps to Reproduce

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

buttonshadow

as shadow Props of react-native only supports in iOS

  • color need to 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..

Reproducible Demo

This is sample snapshot in which I can only get shadow with elevation with only grey color [default].

screen shot 2017-12-15 at 4 56 54 pm

Answer

Hargun Singh picture Hargun Singh · Jan 3, 2018

As of now the only ways to add shadow are using

elevation :value

for Android version >5

or to use

https://github.com/879479119/react-native-shadow

This is a third party plugin but it supports colour although it doesn't support RGB till now

Since there is no "shadow" attribute in style list of Android, if we want to add a shadow effect on a component, we must patch a PNG-24 picture, but it's so non-graceful; therefore here comes an SVG shadow plugin to help with this problem. We suggest you to use native shadow on iOS