Environment:
Packages: (installed)
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;
Is there way to achieve like this Shadow in Android
as shadow Props of react-native only supports in iOS
elevation
but can not change default greyed colorshadowColor
props but not in android as it is only support iOSSee sample code and preview.
This is sample snapshot in which I can only get shadow with elevation with only grey color [default].
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