Elevation in React Native
Solution 1
Try to add following properties to the styles.box
. You could change the values for better results.
// ...
box: {
// ...
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 2,
},
// ...
Solution 2
you can use below code
height: 150,
width: '100%',
backgroundColor: 'white',
elevation: 5,
shadowColor: '#000',
shadowOffset: {width: 0, height: 0},
shadowOpacity: 0.1,
shadowRadius: 5,
Solution 3
After little investigation, I found the working solution and here it is. There is a broad discussion over this problem on the github issue.
box: {
margin: 8,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 2,
}
rather only using elevation property. Also, make sure you give the proper margin to the box for proper spacing. I was lacking the margin in my case. Hope it's useful findings to help.
Solution 4
You can add this style in your View
headerstyle:{
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 2,
alignSelf: 'stretch'
},
Related videos on Youtube
![Kiran Maniya](https://i.stack.imgur.com/R68eP.jpg?s=256&g=1)
Kiran Maniya
I love Javascript, die heart fan of Vue, expert in React, played with Electron. Over the past few years, I worked in around 8 javascript frameworks, Laravel, Core PHP. I'm almost #Workoholic. Few years back, I started programming carrier with Android and PHP. I believe in Start today, Tomorrow is an illusion. I'm a freelancer, Expert in React Native/React Native Web, and Open for Good Opportunities.
Updated on July 08, 2021Comments
-
Kiran Maniya almost 3 years
Here is my style defined in the React-Native screen. I have used the
elevation
property to achieve a box-shadow. But it's not working properly.const styles = StyleSheet.create({ scrollContainer: { flex: 1, }, container: { flex: 1, flexDirection: "row", flexWrap: "wrap", padding: 2 }, box: { margin: 8, width: Dimensions.get('window').width / 2 - 18, height: Dimensions.get('window').width / 2 - 18, justifyContent: "center", alignItems: "center", borderStyle: 'dashed', borderLeftWidth: 1, borderTopWidth: 1, borderRightWidth: 1, borderBottomWidth: 1, borderTopColor: 'black', borderBottomEndRadius : 8, borderTopStartRadius: 8, borderTopEndRadius: 8, borderBottomStartRadius: 8, borderBottomLeftRadius:8, borderBottomRightRadius:8, elevation: 5 }, navBar:{ backgroundColor: "#000", } });
I have also tried using box-shadow but the same problem arises.
-
Milore over 5 yearsHave you tried specifing
shadowColor: Colors.BLACK, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.16, shadowRadius: 16
? Values are clearly random :)
-
-
CrackerKSR over 2 yearsshadow properties has not effect except elevation and shadowColor