View

Views are the most basic building block of React Native apps, much like how divs are the most basic building block of websites. In terms of implementation, View is an abstraction layer on top of the target platform's native equivalent, whether that's UIView, android.view, <div>, or something else.

Views are primarily used for styling and layout of children elements. Let's look at a few of the styles we can apply to views. The example below contains two Views: the outer view which specifies the alignment of the content contained within, and the inner view which draws a blue square.

Below you can find the most common styles. Feel free to experiment with them in the example code.

Layout Styles
PropertyTypeDescription
flexnumberWhat proportion of the available space should this element expand to fill? 0 means the element doesn't expand.
flexDirectionstringDo you want a vertical (column) or horizontal (row) layout? This choice determines the orientation of the primary axis of your layout. One of: row, column.
justifyContentstringHow should the content be distributed along the primary axis of your layout? Should it be at the start, the center, the end, or spaced evenly? One of: flex-start, center, flex-end, space-around, space-between.
alignItemsstringHow should the content be aligned along the secondary axis of your layout? (If the primary axis is row, then the secondary axis is column, and vice versa) Should content be aligned at the start, the center, the end, or stretched to fill? One of: flex-start, center, flex-end, stretch.
widthnumberA fixed width
heightnumberA fixed height
marginnumberHow much space should separate this element from other adjacent elements? For more granular control, use the properties: marginTop, marginBottom, marginLeft, marginRight.
paddingnumberHow much padding should be within this element before its children are shown? For more granular control, use the properties: paddingTop, paddingBottom, paddingLeft, paddingRight.
Visual Styles
PropertyTypeDescription
backgroundColorstringThe background color
borderWidthnumberThe border width. For more granular control, use the properties: borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth.
borderColorstringThe color of the border. For more granular control, use the properties: borderTopColor, borderBottomColor, borderLeftColor, borderRightColor.
borderRadiusnumberRounded edges
opacitynumberHow transparent should this element be? 0 means fully transparent, 1 means fully opaque.
View

Views are the most basic building block of React Native apps, much like how divs are the most basic building block of websites. In terms of implementation, View is an abstraction layer on top of the target platform's native equivalent, whether that's UIView, android.view, <div>, or something else.

Views are primarily used for styling and layout of children elements. Let's look at a few of the styles we can apply to views. The example below contains two Views: the outer view which specifies the alignment of the content contained within, and the inner view which draws a blue square.

Below you can find the most common styles. Feel free to experiment with them in the example code.

Layout Styles
PropertyTypeDescription
flexnumberWhat proportion of the available space should this element expand to fill? 0 means the element doesn't expand.
flexDirectionstringDo you want a vertical (column) or horizontal (row) layout? This choice determines the orientation of the primary axis of your layout. One of: row, column.
justifyContentstringHow should the content be distributed along the primary axis of your layout? Should it be at the start, the center, the end, or spaced evenly? One of: flex-start, center, flex-end, space-around, space-between.
alignItemsstringHow should the content be aligned along the secondary axis of your layout? (If the primary axis is row, then the secondary axis is column, and vice versa) Should content be aligned at the start, the center, the end, or stretched to fill? One of: flex-start, center, flex-end, stretch.
widthnumberA fixed width
heightnumberA fixed height
marginnumberHow much space should separate this element from other adjacent elements? For more granular control, use the properties: marginTop, marginBottom, marginLeft, marginRight.
paddingnumberHow much padding should be within this element before its children are shown? For more granular control, use the properties: paddingTop, paddingBottom, paddingLeft, paddingRight.
Visual Styles
PropertyTypeDescription
backgroundColorstringThe background color
borderWidthnumberThe border width. For more granular control, use the properties: borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth.
borderColorstringThe color of the border. For more granular control, use the properties: borderTopColor, borderBottomColor, borderLeftColor, borderRightColor.
borderRadiusnumberRounded edges
opacitynumberHow transparent should this element be? 0 means fully transparent, 1 means fully opaque.