Example

import React from "react"; import { View, StyleSheet } from "react-native"; const ViewStyleProps = () => { return ( <View style={styles.container}> <View style={styles.top} /> <View style={styles.middle} /> <View style={styles.bottom} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "space-between", backgroundColor: "#fff", padding: 20, margin: 10, }, top: { flex: 0.3, backgroundColor: "grey", borderWidth: 5, borderTopLeftRadius: 20, borderTopRightRadius: 20, }, middle: { flex: 0.3, backgroundColor: "beige", borderWidth: 5, }, bottom: { flex: 0.3, backgroundColor: "pink", borderWidth: 5, borderBottomLeftRadius: 20, borderBottomRightRadius: 20, }, }); export default ViewStyleProps;

Reference

Props

borderRightColor

Type	Required
color	No

---

backfaceVisibility

Type	Required
enum('visible', 'hidden')	No

---

borderBottomColor

Type	Required
color	No

---

borderBottomEndRadius

Type	Required
number	No

---

borderBottomLeftRadius

Type	Required
number	No

---

borderBottomRightRadius

Type	Required
number	No

---

borderBottomStartRadius

Type	Required
number	No

---

borderBottomWidth

Type	Required
number	No

---

borderColor

Type	Required
color	No

---

borderEndColor

Type	Required
color	No

---

borderLeftColor

Type	Required
color	No

---

borderLeftWidth

Type	Required
number	No

---

borderRadius

If the rounded border is not visible, try applying overflow: 'hidden' as well.

Type	Required
number	No

---

backgroundColor

Type	Required
color	No

---

borderRightWidth

Type	Required
number	No

---

borderStartColor

Type	Required
color	No

---

borderStyle

Type	Required
enum('solid', 'dotted', 'dashed')	No

---

borderTopColor

Type	Required
color	No

---

borderTopEndRadius

Type	Required
number	No

---

borderTopLeftRadius

Type	Required
number	No

---

borderTopRightRadius

Type	Required
number	No

---

borderTopStartRadius

Type	Required
number	No

---

borderTopWidth

Type	Required
number	No

---

borderWidth

Type	Required
number	No

---

opacity

Type	Required
number	No

---

elevation

(Android-only) Sets the elevation of a view, using Android's underlying elevation API. 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.

Type	Required	Platform
number	No	Android