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

Closed
BhavanPatel opened this Issue Dec 15, 2017 · 13 comments

Comments

Projects
None yet
@BhavanPatel
Copy link

BhavanPatel commented Dec 15, 2017

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

buttonshadow
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
screen shot 2017-12-15 at 4 56 54 pm

@mostafa69d

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

@towfiqi

This comment has been minimized.

Copy link

towfiqi commented Jan 25, 2018

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

This comment has been minimized.

Copy link
Collaborator

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

@BhavanPatel

This comment has been minimized.

Copy link
Author

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!

@mostafa69d

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.

@BhavanPatel

This comment has been minimized.

Copy link
Author

BhavanPatel commented Mar 2, 2018

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

@workadev

This comment has been minimized.

Copy link

workadev commented May 3, 2018

Try adding elevation for Android.

@Rish02Sharma

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.

@pushpendra65

This comment has been minimized.

Copy link

pushpendra65 commented Jul 9, 2018

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

@martaHazda

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.

@waveChand

This comment has been minimized.

Copy link

waveChand commented Oct 18, 2018

@react-native-bot issue is still there 57.0

@ikosar

This comment has been minimized.

Copy link

ikosar commented Nov 28, 2018

+1

@SangeetManghnani

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:

##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:
image

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