15

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

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Bhavan Patel
  • 1,755
  • 1
  • 16
  • 30
  • Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. – halfer Dec 16 '17 at 11:47

6 Answers6

4

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

Hargun Singh
  • 544
  • 7
  • 19
  • 5
    I know this answer is not the best solution to the issue but @Bhavan Patel needed urgent help so I shared this information I was able to research up on this topic.I appreciate any suggestions to improve this answer.Thank You – Hargun Singh Jan 03 '18 at 19:02
2

**

You can use LinearGradient trick

**

https://hashnode.com/post/is-there-any-good-alternative-to-elevations-for-android-in-react-native-cjc600tva00pfuzwup50xv01z

Updated:

your now able to add shadow color in react native 0.64

TheEhsanSarshar
  • 2,677
  • 22
  • 41
1

Try

{
   backgroundColor:"#fff",
   elevation:4,
   shadowColor:"blue",
}

It's not exactly similar to expected behaviour by that's the best we have right now without using any external packages.

Musaib
  • 11
  • 1
0

You can use the react-native-shadow-2 library to easily add different colored shadows, even gradient shadows

<Shadow distance={4} startColor='rgba(42, 255, 42, 0.4)' finalColor='rgba(42, 255, 42, 0.05)' >
  <View style={{width:200,height:80}}>
    <Text>TEST!</Text>
  </View>
</Shadow>
Kasun Thilina
  • 1,523
  • 2
  • 14
  • 20
0

We are now able to set shadowColor on Android API 28 and above, however, you must also set an elevation of greater than 0 and backgroundColor must be set to something other than transparent.

Here's an example of what is working for me:

headerShadow: {
      shadowColor: colorSet.primaryForeground, 
      elevation: 10, // elevation must be set
      backgroundColor : 'rgba(0,0,0, 0.1)' // background color must be set
    },
Pyper
  • 75
  • 1
  • 7
-1

Use elevation to implement shadows on RN Android. Added elevation prop #27

<View elevation={5}> </View>

i18n
  • 130
  • 5