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.
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
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
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.
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.
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.
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.
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.
On iOS, zIndex may require Views to be siblings of each other for it to work as expected.