Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Elevation in React Native

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.

like image 902
Kiran Maniya Avatar asked Dec 06 '18 08:12

Kiran Maniya


People also ask

What is elevation react native?

elevation This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

What is elevation in react JS?

Elevation is the relative distance between two surfaces along the z-axis. volume_off volume_off.

Why elevation is not working in react native?

The elevation style property on Android does not work unless backgroundColor has been specified for the element.

What is zIndex in react native?

zIndex is the Expo and React Native analog of CSS's z-index property which lets the developer control the order in which components are displayed over one another.


2 Answers

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,
},
// ...
like image 112
Helmer Barcos Avatar answered Sep 30 '22 04:09

Helmer Barcos


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,
like image 20
Mayank Pandav Avatar answered Sep 30 '22 06:09

Mayank Pandav