BoxShadow in react-native - react-native

Question

I am trying to create a box-shadow around a view in react-native version 0.59.9
I have tried 'shadowOffSet' and all shadow properties but no use
import React, { Component } from 'react';
import { Text, View, StyleSheet, PixelRatio } from 'react-native';
const styles = {
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
}
export default class Card extends Component {
render() {
return (
<View style={styles.container}>
<View style={{
borderWidth: 1,
borderRadius: 20,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 20,
borderWidth: (1 / PixelRatio.getPixelSizeForLayoutSize(1)),
elevation: 1,
justifyContent: 'center',
alignItems: 'center',
overflow: this.props.overflow ? this.props.overflow : 'hidden',
width: 120,
height: 150}}>
<Text>Mine</Text>
</View>
</View>
);
}
}
The result is attached as screenshot
https://user-images.githubusercontent.com/14028306/60788321-0a283500-a17a-11e9-841d-5604982783ac.jpg

Answer 1

You can use the react native box shadow generator for the best practice.
https://ethercreative.github.io/react-native-shadow-generator/

Answer 2

please use this example for boxShow in react-native
import React, { Component } from 'react';
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.buttonStyles}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
buttonStyles: {
backgroundColor: '#f2f2f2',
paddingVertical: 10,
width: '60%',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.9,
elevation: 10,
},
welcome: {
fontSize: 20,
alignSelf: 'center',
}
});

Answer 3

Your code is valid on ios plateform for the bowShadow but for android you have to pass by the property elevation

Answer 4

Increasing the elevation parameter in your View style will increase the radius of the box-shadow on android devices:
https://snack.expo.io/S1NK7dxbr
As an aside, you have borderWidth listed twice as a style in your nested View component.