react-native/docs/layout-props.md

---
id: layout-props
title: Layout Props
layout: docs
category: APIs
permalink: docs/layout-props.html
next: picker-style-props
previous: vibrationios
---
### Props

- [`marginHorizontal`](docs/layout-props.html#marginhorizontal)
- [`alignContent`](docs/layout-props.html#aligncontent)
- [`alignSelf`](docs/layout-props.html#alignself)
- [`aspectRatio`](docs/layout-props.html#aspectratio)
- [`borderBottomWidth`](docs/layout-props.html#borderbottomwidth)
- [`borderEndWidth`](docs/layout-props.html#borderendwidth)
- [`borderLeftWidth`](docs/layout-props.html#borderleftwidth)
- [`borderRightWidth`](docs/layout-props.html#borderrightwidth)
- [`borderStartWidth`](docs/layout-props.html#borderstartwidth)
- [`borderTopWidth`](docs/layout-props.html#bordertopwidth)
- [`borderWidth`](docs/layout-props.html#borderwidth)
- [`bottom`](docs/layout-props.html#bottom)
- [`display`](docs/layout-props.html#display)
- [`end`](docs/layout-props.html#end)
- [`flex`](docs/layout-props.html#flex)
- [`flexBasis`](docs/layout-props.html#flexbasis)
- [`flexDirection`](docs/layout-props.html#flexdirection)
- [`flexGrow`](docs/layout-props.html#flexgrow)
- [`flexShrink`](docs/layout-props.html#flexshrink)
- [`flexWrap`](docs/layout-props.html#flexwrap)
- [`height`](docs/layout-props.html#height)
- [`justifyContent`](docs/layout-props.html#justifycontent)
- [`left`](docs/layout-props.html#left)
- [`margin`](docs/layout-props.html#margin)
- [`marginBottom`](docs/layout-props.html#marginbottom)
- [`marginEnd`](docs/layout-props.html#marginend)
- [`alignItems`](docs/layout-props.html#alignitems)
- [`marginLeft`](docs/layout-props.html#marginleft)
- [`marginRight`](docs/layout-props.html#marginright)
- [`marginStart`](docs/layout-props.html#marginstart)
- [`marginTop`](docs/layout-props.html#margintop)
- [`marginVertical`](docs/layout-props.html#marginvertical)
- [`maxHeight`](docs/layout-props.html#maxheight)
- [`maxWidth`](docs/layout-props.html#maxwidth)
- [`minHeight`](docs/layout-props.html#minheight)
- [`minWidth`](docs/layout-props.html#minwidth)
- [`overflow`](docs/layout-props.html#overflow)
- [`padding`](docs/layout-props.html#padding)
- [`paddingBottom`](docs/layout-props.html#paddingbottom)
- [`paddingEnd`](docs/layout-props.html#paddingend)
- [`paddingHorizontal`](docs/layout-props.html#paddinghorizontal)
- [`paddingLeft`](docs/layout-props.html#paddingleft)
- [`paddingRight`](docs/layout-props.html#paddingright)
- [`paddingStart`](docs/layout-props.html#paddingstart)
- [`paddingTop`](docs/layout-props.html#paddingtop)
- [`paddingVertical`](docs/layout-props.html#paddingvertical)
- [`position`](docs/layout-props.html#position)
- [`right`](docs/layout-props.html#right)
- [`start`](docs/layout-props.html#start)
- [`top`](docs/layout-props.html#top)
- [`width`](docs/layout-props.html#width)
- [`zIndex`](docs/layout-props.html#zindex)
- [`direction`](docs/layout-props.html#direction)






---

# Reference

## Props

### `marginHorizontal`

Setting `marginHorizontal` has the same effect as setting
 both `marginLeft` and `marginRight`.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `alignContent`

`alignContent` controls how rows align in the cross direction,
 overriding the `alignContent` of the parent.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 for more details.

| Type | Required |
| - | - |
| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') | No |




---

### `alignSelf`

`alignSelf` controls how a child aligns in the cross direction,
 overriding the `alignItems` of the parent. It works like `align-self`
 in CSS (default: auto).
 See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
 for more details.

| Type | Required |
| - | - |
| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No |




---

### `aspectRatio`

Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a
non-standard property only available in react native and not CSS.

- On a node with a set width/height aspect ratio control the size of the unset dimension
- On a node with a set flex basis aspect ratio controls the size of the node in the cross axis
  if unset
- On a node with a measure function aspect ratio works as though the measure function measures
  the flex basis
- On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis
  if unset
- Aspect ratio takes min/max dimensions into account

| Type | Required |
| - | - |
| number | No |




---

### `borderBottomWidth`

`borderBottomWidth` works like `border-bottom-width` in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width
for more details.

| Type | Required |
| - | - |
| number | No |




---

### `borderEndWidth`

When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`.
When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.

| Type | Required |
| - | - |
| number | No |




---

### `borderLeftWidth`

`borderLeftWidth` works like `border-left-width` in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
for more details.

| Type | Required |
| - | - |
| number | No |




---

### `borderRightWidth`

`borderRightWidth` works like `border-right-width` in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
for more details.

| Type | Required |
| - | - |
| number | No |




---

### `borderStartWidth`

When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`.
When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.

| Type | Required |
| - | - |
| number | No |




---

### `borderTopWidth`

`borderTopWidth` works like `border-top-width` in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
for more details.

| Type | Required |
| - | - |
| number | No |




---

### `borderWidth`

`borderWidth` works like `border-width` in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
for more details.

| Type | Required |
| - | - |
| number | No |




---

### `bottom`

`bottom` is the number of logical pixels to offset the bottom edge of
 this component.

 It works similarly to `bottom` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.

 See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
 for more details of how `bottom` affects layout.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `display`

`display` sets the display type of this component.

 It works similarly to `display` in CSS, but only support 'flex' and 'none'.
 'flex' is the default.

| Type | Required |
| - | - |
| enum('none', 'flex') | No |




---

### `end`

When the direction is `ltr`, `end` is equivalent to `right`.
When the direction is `rtl`, `end` is equivalent to `left`.

This style takes precedence over the `left` and `right` styles.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `flex`

In React Native `flex` does not work the same way that it does in CSS.
 `flex` is a number rather than a string, and it works
 according to the `Yoga` library
 at https://github.com/facebook/yoga

 When `flex` is a positive number, it makes the component flexible
 and it will be sized proportional to its flex value. So a
 component with `flex` set to 2 will take twice the space as a
 component with `flex` set to 1.

 When `flex` is 0, the component is sized according to `width`
 and `height` and it is inflexible.

 When `flex` is -1, the component is normally sized according
 `width` and `height`. However, if there's not enough space,
 the component will shrink to its `minWidth` and `minHeight`.

flexGrow, flexShrink, and flexBasis work the same as in CSS.

| Type | Required |
| - | - |
| number | No |




---

### `flexBasis`



| Type | Required |
| - | - |
| number, ,string | No |




---

### `flexDirection`

`flexDirection` controls which directions children of a container go.
 `row` goes left to right, `column` goes top to bottom, and you may
 be able to guess what the other two do. It works like `flex-direction`
 in CSS, except the default is `column`.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
 for more details.

| Type | Required |
| - | - |
| enum('row', 'row-reverse', 'column', 'column-reverse') | No |




---

### `flexGrow`



| Type | Required |
| - | - |
| number | No |




---

### `flexShrink`



| Type | Required |
| - | - |
| number | No |




---

### `flexWrap`

`flexWrap` controls whether children can wrap around after they
 hit the end of a flex container.
 It works like `flex-wrap` in CSS (default: nowrap).
 See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
 for more details.

| Type | Required |
| - | - |
| enum('wrap', 'nowrap') | No |




---

### `height`

`height` sets the height of this component.

 It works similarly to `height` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `justifyContent`

`justifyContent` aligns children in the main direction.
 For example, if children are flowing vertically, `justifyContent`
 controls how they align vertically.
 It works like `justify-content` in CSS (default: flex-start).
 See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 for more details.

| Type | Required |
| - | - |
| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') | No |




---

### `left`

`left` is the number of logical pixels to offset the left edge of
 this component.

 It works similarly to `left` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.

 See https://developer.mozilla.org/en-US/docs/Web/CSS/left
 for more details of how `left` affects layout.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `margin`

Setting `margin` has the same effect as setting each of
 `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/margin
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `marginBottom`

`marginBottom` works like `margin-bottom` in CSS.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `marginEnd`

When direction is `ltr`, `marginEnd` is equivalent to `marginRight`.
When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `alignItems`

`alignItems` aligns children in the cross direction.
 For example, if children are flowing vertically, `alignItems`
 controls how they align horizontally.
 It works like `align-items` in CSS (default: stretch).
 See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 for more details.

| Type | Required |
| - | - |
| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No |




---

### `marginLeft`

`marginLeft` works like `margin-left` in CSS.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `marginRight`

`marginRight` works like `margin-right` in CSS.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `marginStart`

When direction is `ltr`, `marginStart` is equivalent to `marginLeft`.
When direction is `rtl`, `marginStart` is equivalent to `marginRight`.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `marginTop`

`marginTop` works like `margin-top` in CSS.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `marginVertical`

Setting `marginVertical` has the same effect as setting both
 `marginTop` and `marginBottom`.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `maxHeight`

`maxHeight` is the maximum height for this component, in logical pixels.

 It works similarly to `max-height` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.

 See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `maxWidth`

`maxWidth` is the maximum width for this component, in logical pixels.

 It works similarly to `max-width` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.

 See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `minHeight`

`minHeight` is the minimum height for this component, in logical pixels.

 It works similarly to `min-height` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.

 See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `minWidth`

`minWidth` is the minimum width for this component, in logical pixels.

 It works similarly to `min-width` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.

 See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `overflow`

`overflow` controls how children are measured and displayed.
 `overflow: hidden` causes views to be clipped while `overflow: scroll`
 causes views to be measured independently of their parents main axis.
 It works like `overflow` in CSS (default: visible).
 See https://developer.mozilla.org/en/docs/Web/CSS/overflow
 for more details.
 `overflow: visible` only works on iOS. On Android, all views will clip
 their children.

| Type | Required |
| - | - |
| enum('visible', 'hidden', 'scroll') | No |




---

### `padding`

Setting `padding` has the same effect as setting each of
 `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/padding
 for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `paddingBottom`

`paddingBottom` works like `padding-bottom` in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `paddingEnd`

When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`.
When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `paddingHorizontal`

Setting `paddingHorizontal` is like setting both of
 `paddingLeft` and `paddingRight`.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `paddingLeft`

`paddingLeft` works like `padding-left` in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `paddingRight`

`paddingRight` works like `padding-right` in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `paddingStart`

When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`.
When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `paddingTop`

`paddingTop` works like `padding-top` in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `paddingVertical`

Setting `paddingVertical` is like setting both of
 `paddingTop` and `paddingBottom`.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `position`

`position` in React Native is similar to regular CSS, but
 everything is set to `relative` by default, so `absolute`
 positioning is always just relative to the parent.

 If you want to position a child using specific numbers of logical
 pixels relative to its parent, set the child to have `absolute`
 position.

 If you want to position a child relative to something
 that is not its parent, just don't use styles for that. Use the
 component tree.

 See https://github.com/facebook/yoga
 for more details on how `position` differs between React Native
 and CSS.

| Type | Required |
| - | - |
| enum('absolute', 'relative') | No |




---

### `right`

`right` is the number of logical pixels to offset the right edge of
 this component.

 It works similarly to `right` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.

 See https://developer.mozilla.org/en-US/docs/Web/CSS/right
 for more details of how `right` affects layout.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `start`

When the direction is `ltr`, `start` is equivalent to `left`.
When the direction is `rtl`, `start` is equivalent to `right`.

This style takes precedence over the `left`, `right`, and `end` styles.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `top`

`top` is the number of logical pixels to offset the top edge of
 this component.

 It works similarly to `top` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.

 See https://developer.mozilla.org/en-US/docs/Web/CSS/top
 for more details of how `top` affects layout.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `width`

`width` sets the width of this component.

 It works similarly to `width` in CSS, but in React Native you
 must use points or percentages. Ems and other units are not supported.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.

| Type | Required |
| - | - |
| number, ,string | No |




---

### `zIndex`

`zIndex` controls which components display on top of others.
 Normally, you don't use `zIndex`. Components render according to
 their order in the document tree, so later components draw over
 earlier ones. `zIndex` may be useful if you have animations or custom
 modal interfaces where you don't want this behavior.

 It works like the CSS `z-index` property - components with a larger
 `zIndex` will render on top. Think of the z-direction like it's
 pointing from the phone into your eyeball.
 See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for
 more details.

| Type | Required |
| - | - |
| number | No |




---

### `direction`

`direction` specifies the directional flow of the user interface.
 The default is `inherit`, except for root node which will have
 value based on the current locale.
 See https://facebook.github.io/yoga/docs/rtl/
 for more details.
 

| Type | Required | Platform |
| - | - | - |
| enum('inherit', 'ltr', 'rtl') | No | iOS  |