Edit

View Style Props

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