Layout Props
Reference
Type | Required |
---|
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') | No |
Type | Required |
---|
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No |
Type | Required |
---|
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No |
Aspect ratio controls 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 controls 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
When direction is ltr
, borderEndWidth
is equivalent to borderRightWidth
. When direction is rtl
, borderEndWidth
is equivalent to borderLeftWidth
.
When direction is ltr
, borderStartWidth
is equivalent to borderLeftWidth
. When direction is rtl
, borderStartWidth
is equivalent to borderRightWidth
.
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.
Type | Required |
---|
number, string | No |
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://yogalayout.com/docs/layout-direction for more details.
Type | Required | Platform |
---|
enum('inherit', 'ltr', 'rtl') | No | iOS |
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 |
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 |
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.
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. flex: <positive number>
equates to flexGrow: <positive number>, flexShrink: 1, flexBasis: 0
.
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, string | No |
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 |
Type | Required |
---|
enum('wrap', 'nowrap') | No |
height
sets the height of this component.
Type | Required |
---|
number, string | No |
Type | Required |
---|
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No |
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.
Type | Required |
---|
number, string | No |
Type | Required |
---|
number, string | No |
Type | Required |
---|
number, string | No |
When direction is ltr
, marginEnd
is equivalent to marginRight
. When direction is rtl
, marginEnd
is equivalent to marginLeft
.
Type | Required |
---|
number, string | No |
Setting marginHorizontal
has the same effect as setting both marginLeft
and marginRight
.
Type | Required |
---|
number, string | No |
Type | Required |
---|
number, string | No |
Type | Required |
---|
number, string | No |
When direction is ltr
, marginStart
is equivalent to marginLeft
. When direction is rtl
, marginStart
is equivalent to marginRight
.
Type | Required |
---|
number, string | No |
Type | Required |
---|
number, string | No |
Setting marginVertical
has the same effect as setting both marginTop
and marginBottom
.
Type | Required |
---|
number, string | No |
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.
Type | Required |
---|
number, string | No |
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.
Type | Required |
---|
number, string | No |
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.
Type | Required |
---|
number, string | No |
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.
Type | Required |
---|
number, string | No |
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.
Type | Required |
---|
enum('visible', 'hidden', 'scroll') | No |
Type | Required |
---|
number, string | No |
Type | Required |
---|
number, string | No |
When direction is ltr
, paddingEnd
is equivalent to paddingRight
. When direction is rtl
, paddingEnd
is equivalent to paddingLeft
.
Type | Required |
---|
number, string | No |
Setting paddingHorizontal
is like setting both of paddingLeft
and paddingRight
.
Type | Required |
---|
number, string | No |
Type | Required |
---|
number, string | No |
Type | Required |
---|
number, string | No |
When direction is ltr
, paddingStart
is equivalent to paddingLeft
. When direction is rtl
, paddingStart
is equivalent to paddingRight
.
Type | Required |
---|
number, string | No |
Type | Required |
---|
number, ,string | No |
Setting paddingVertical
is like setting both of paddingTop
and paddingBottom
.
Type | Required |
---|
number, string | No |
position
in React Native is similar to regular CSS, but everything is set to relative
by default, so absolute
positioning is always 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, don't use styles for that. Use the component tree.
Type | Required |
---|
enum('absolute', 'relative') | No |
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.
Type | Required |
---|
number, string | No |
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
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.
Type | Required |
---|
number, string | No |
width
sets the width of this component.
Type | Required |
---|
number, string | No |
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.
On iOS, zIndex
may require View
s to be siblings of each other for it to work as expected.