Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated docs for next

Browse Source
This commit is contained in:
Website Deployment Script
2016-07-25 21:33:44 +00:00
parent 9cabfb85b4
commit fa7e76945f
1 changed files with 44 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/layout-props.html
+44 -43
View File
@@ -7,9 +7,9 @@
For example, if children are flowing vertically, <code>alignItems</code>
controls how they align horizontally.
It works like <code>align-items</code> in CSS, except the default value
is <code>stretch</code> instead of <code>flex-start</code>. See
<a href="https://css-tricks.com/almanac/properties/a/align-items/">https://css-tricks.com/almanac/properties/a/align-items/</a>
for more detail.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alignself"></a>alignSelf <span class="propType">ReactPropTypes.oneOf([
is <code>stretch</code> instead of <code>flex-start</code>.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">https://developer.mozilla.org/en-US/docs/Web/CSS/align-items</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alignself"></a>alignSelf <span class="propType">ReactPropTypes.oneOf([
&#x27;auto&#x27;,
&#x27;flex-start&#x27;,
&#x27;flex-end&#x27;,
@@ -17,25 +17,25 @@
&#x27;stretch&#x27;
])</span> <a class="hash-link" href="docs/layout-props.html#alignself">#</a></h4><div><p><code>alignSelf</code> controls how a child aligns in the cross direction,
overriding the <code>alignItems</code> of the parent. It works like <code>align-self</code>
in CSS. See
<a href="https://css-tricks.com/almanac/properties/a/align-self/">https://css-tricks.com/almanac/properties/a/align-self/</a>
for more detail.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderbottomwidth"></a>borderBottomWidth <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#borderbottomwidth">#</a></h4><div><p><code>borderBottomWidth</code> works like <code>border-bottom-width</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_border-bottom_width.asp">http://www.w3schools.com/cssref/pr_border-bottom_width.asp</a>
in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">https://developer.mozilla.org/en-US/docs/Web/CSS/align-self</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderbottomwidth"></a>borderBottomWidth <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#borderbottomwidth">#</a></h4><div><p><code>borderBottomWidth</code> works like <code>border-bottom-width</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderleftwidth"></a>borderLeftWidth <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#borderleftwidth">#</a></h4><div><p><code>borderLeftWidth</code> works like <code>border-left-width</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_border-bottom_width.asp">http://www.w3schools.com/cssref/pr_border-bottom_width.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderrightwidth"></a>borderRightWidth <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#borderrightwidth">#</a></h4><div><p><code>borderRightWidth</code> works like <code>border-right-width</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_border-right_width.asp">http://www.w3schools.com/cssref/pr_border-right_width.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bordertopwidth"></a>borderTopWidth <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#bordertopwidth">#</a></h4><div><p><code>borderTopWidth</code> works like <code>border-top-width</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_border-top_width.asp">http://www.w3schools.com/cssref/pr_border-top_width.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderwidth"></a>borderWidth <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#borderwidth">#</a></h4><div><p><code>borderWidth</code> works like <code>border-width</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_border-width.asp">http://www.w3schools.com/cssref/pr_border-width.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bottom"></a>bottom <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#bottom">#</a></h4><div><p><code>bottom</code> is the number of logical pixels to offset the bottom edge of
this component.</p><p> It works similarly to <code>bottom</code> in CSS, but in React Native you must
use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom">https://developer.mozilla.org/en-US/docs/Web/CSS/bottom</a>
for more details of how <code>top</code> affects layout.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flex"></a>flex <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#flex">#</a></h4><div><p>In React Native <code>flex</code> does not work the same way that it does in CSS.
<code>flex</code> is a number rather than a string, and it works
according to the <code>css-layout</code> library
at <a href="https://github.com/facebook/css-layout">https://github.com/facebook/css-layout</a> .</p><p> When <code>flex</code> is a positive number, it makes the component flexible
at <a href="https://github.com/facebook/css-layout">https://github.com/facebook/css-layout</a>.</p><p> When <code>flex</code> is a positive number, it makes the component flexible
and it will be sized proportional to its flex value. So a
component with <code>flex</code> set to 2 will take twice the space as a
component with <code>flex</code> set to 1.</p><p> When <code>flex</code> is 0, the component is sized according to <code>width</code>
@@ -49,18 +49,18 @@ for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a clas
])</span> <a class="hash-link" href="docs/layout-props.html#flexdirection">#</a></h4><div><p><code>flexDirection</code> controls which directions children of a container go.
<code>row</code> goes left to right, <code>column</code> goes top to bottom, and you may
be able to guess what the other two do. It works like <code>flex-direction</code>
in CSS, except the default is <code>column</code>. See
<a href="https://css-tricks.com/almanac/properties/f/flex-direction/">https://css-tricks.com/almanac/properties/f/flex-direction/</a>
for more detail.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flexwrap"></a>flexWrap <span class="propType">ReactPropTypes.oneOf([
in CSS, except the default is <code>column</code>.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flexwrap"></a>flexWrap <span class="propType">ReactPropTypes.oneOf([
&#x27;wrap&#x27;,
&#x27;nowrap&#x27;
])</span> <a class="hash-link" href="docs/layout-props.html#flexwrap">#</a></h4><div><p><code>flexWrap</code> controls whether children can wrap around after they
hit the end of a flex container.
It works like <code>flex-wrap</code> in CSS. See
<a href="https://css-tricks.com/almanac/properties/f/flex-wrap/">https://css-tricks.com/almanac/properties/f/flex-wrap/</a>
for more detail.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="height"></a>height <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#height">#</a></h4><div><p><code>height</code> sets the height of this component.</p><p> It works similarly to <code>height</code> in CSS, but in React Native you
It works like <code>flex-wrap</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="height"></a>height <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#height">#</a></h4><div><p><code>height</code> sets the height of this component.</p><p> It works similarly to <code>height</code> in CSS, but in React Native you
must use logical pixel units, rather than percents, ems, or any of that.
See <a href="http://www.w3schools.com/cssref/pr_dim_width.asp">http://www.w3schools.com/cssref/pr_dim_width.asp</a> for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="justifycontent"></a>justifyContent <span class="propType">ReactPropTypes.oneOf([
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height">https://developer.mozilla.org/en-US/docs/Web/CSS/height</a> for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="justifycontent"></a>justifyContent <span class="propType">ReactPropTypes.oneOf([
&#x27;flex-start&#x27;,
&#x27;flex-end&#x27;,
&#x27;center&#x27;,
@@ -69,43 +69,44 @@ for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a clas
])</span> <a class="hash-link" href="docs/layout-props.html#justifycontent">#</a></h4><div><p><code>justifyContent</code> aligns children in the main direction.
For example, if children are flowing vertically, <code>justifyContent</code>
controls how they align vertically.
It works like <code>justify-content</code> in CSS. See
<a href="https://css-tricks.com/almanac/properties/j/justify-content/">https://css-tricks.com/almanac/properties/j/justify-content/</a>
for more detail.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="left"></a>left <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#left">#</a></h4><div><p><code>left</code> is the number of logical pixels to offset the left edge of
It works like <code>justify-content</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="left"></a>left <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#left">#</a></h4><div><p><code>left</code> is the number of logical pixels to offset the left edge of
this component.</p><p> It works similarly to <code>left</code> in CSS, but in React Native you must
use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left">https://developer.mozilla.org/en-US/docs/Web/CSS/left</a>
for more details of how <code>left</code> affects layout.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="margin"></a>margin <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#margin">#</a></h4><div><p>Setting <code>margin</code> has the same effect as setting each of
<code>marginTop</code>, <code>marginLeft</code>, <code>marginBottom</code>, and <code>marginRight</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginbottom"></a>marginBottom <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#marginbottom">#</a></h4><div><p><code>marginBottom</code> works like <code>margin-bottom</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_margin-bottom.asp">http://www.w3schools.com/cssref/pr_margin-bottom.asp</a>
<code>marginTop</code>, <code>marginLeft</code>, <code>marginBottom</code>, and <code>marginRight</code>.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">https://developer.mozilla.org/en-US/docs/Web/CSS/margin</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginbottom"></a>marginBottom <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#marginbottom">#</a></h4><div><p><code>marginBottom</code> works like <code>margin-bottom</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginhorizontal"></a>marginHorizontal <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#marginhorizontal">#</a></h4><div><p>Setting <code>marginHorizontal</code> has the same effect as setting
both <code>marginLeft</code> and <code>marginRight</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginleft"></a>marginLeft <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#marginleft">#</a></h4><div><p><code>marginLeft</code> works like <code>margin-left</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_margin-left.asp">http://www.w3schools.com/cssref/pr_margin-left.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginright"></a>marginRight <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#marginright">#</a></h4><div><p><code>marginRight</code> works like <code>margin-right</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_margin-right.asp">http://www.w3schools.com/cssref/pr_margin-right.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="margintop"></a>marginTop <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#margintop">#</a></h4><div><p><code>marginTop</code> works like <code>margin-top</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_margin-top.asp">http://www.w3schools.com/cssref/pr_margin-top.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginvertical"></a>marginVertical <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#marginvertical">#</a></h4><div><p>Setting <code>marginVertical</code> has the same effect as setting both
<code>marginTop</code> and <code>marginBottom</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxheight"></a>maxHeight <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#maxheight">#</a></h4><div><p><code>maxHeight</code> is the maximum height for this component, in logical pixels.</p><p> It works similarly to <code>max-height</code> in CSS, but in React Native you
must use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="http://www.w3schools.com/cssref/pr_dim_max-height.asp">http://www.w3schools.com/cssref/pr_dim_max-height.asp</a>
must use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height">https://developer.mozilla.org/en-US/docs/Web/CSS/max-height</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxwidth"></a>maxWidth <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#maxwidth">#</a></h4><div><p><code>maxWidth</code> is the maximum width for this component, in logical pixels.</p><p> It works similarly to <code>max-width</code> in CSS, but in React Native you
must use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="http://www.w3schools.com/cssref/pr_dim_max-width.asp">http://www.w3schools.com/cssref/pr_dim_max-width.asp</a>
must use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">https://developer.mozilla.org/en-US/docs/Web/CSS/max-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minheight"></a>minHeight <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#minheight">#</a></h4><div><p><code>minHeight</code> is the minimum height for this component, in logical pixels.</p><p> It works similarly to <code>min-height</code> in CSS, but in React Native you
must use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="http://www.w3schools.com/cssref/pr_dim_min-height.asp">http://www.w3schools.com/cssref/pr_dim_min-height.asp</a>
must use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">https://developer.mozilla.org/en-US/docs/Web/CSS/min-height</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minwidth"></a>minWidth <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#minwidth">#</a></h4><div><p><code>minWidth</code> is the minimum width for this component, in logical pixels.</p><p> It works similarly to <code>min-width</code> in CSS, but in React Native you
must use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="http://www.w3schools.com/cssref/pr_dim_min-width.asp">http://www.w3schools.com/cssref/pr_dim_min-width.asp</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="padding"></a>padding <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#padding">#</a></h4><div><p><code>padding</code> works like <code>padding</code> in CSS.
It&#x27;s like setting each of <code>paddingTop</code>, <code>paddingBottom</code>,
<code>paddingLeft</code>, and <code>paddingRight</code> to the same thing.
See <a href="http://www.w3schools.com/css/css_padding.asp">http://www.w3schools.com/css/css_padding.asp</a>
must use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">https://developer.mozilla.org/en-US/docs/Web/CSS/min-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="padding"></a>padding <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#padding">#</a></h4><div><p>Setting <code>padding</code> has the same effect as setting each of
<code>paddingTop</code>, <code>paddingBottom</code>, <code>paddingLeft</code>, and <code>paddingRight</code>.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding">https://developer.mozilla.org/en-US/docs/Web/CSS/padding</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingbottom"></a>paddingBottom <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#paddingbottom">#</a></h4><div><p><code>paddingBottom</code> works like <code>padding-bottom</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_padding-bottom.asp">http://www.w3schools.com/cssref/pr_padding-bottom.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddinghorizontal"></a>paddingHorizontal <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#paddinghorizontal">#</a></h4><div><p>Setting <code>paddingHorizontal</code> is like setting both of
<code>paddingLeft</code> and <code>paddingRight</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingleft"></a>paddingLeft <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#paddingleft">#</a></h4><div><p><code>paddingLeft</code> works like <code>padding-left</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_padding-left.asp">http://www.w3schools.com/cssref/pr_padding-left.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingright"></a>paddingRight <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#paddingright">#</a></h4><div><p><code>paddingRight</code> works like <code>padding-right</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_padding-right.asp">http://www.w3schools.com/cssref/pr_padding-right.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingtop"></a>paddingTop <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#paddingtop">#</a></h4><div><p><code>paddingTop</code> works like <code>padding-top</code> in CSS.
See <a href="http://www.w3schools.com/cssref/pr_padding-top.asp">http://www.w3schools.com/cssref/pr_padding-top.asp</a>
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingvertical"></a>paddingVertical <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#paddingvertical">#</a></h4><div><p>Setting <code>paddingVertical</code> is like setting both of
<code>paddingTop</code> and <code>paddingBottom</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="position"></a>position <span class="propType">ReactPropTypes.oneOf([
&#x27;absolute&#x27;,
@@ -126,15 +127,15 @@ for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a clas
use logical pixel units, rather than percents, ems, or any of that.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top">https://developer.mozilla.org/en-US/docs/Web/CSS/top</a>
for more details of how <code>top</code> affects layout.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="width"></a>width <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#width">#</a></h4><div><p><code>width</code> sets the width of this component.</p><p> It works similarly to <code>width</code> in CSS, but in React Native you
must use logical pixel units, rather than percents, ems, or any of that.
See <a href="http://www.w3schools.com/cssref/pr_dim_width.asp">http://www.w3schools.com/cssref/pr_dim_width.asp</a> for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zindex"></a>zIndex <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#zindex">#</a></h4><div><p><code>zIndex</code> controls which components display on top of others.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">https://developer.mozilla.org/en-US/docs/Web/CSS/width</a> for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zindex"></a>zIndex <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/layout-props.html#zindex">#</a></h4><div><p><code>zIndex</code> controls which components display on top of others.
Normally, you don&#x27;t use <code>zIndex</code>. Components render according to
their order in the document tree, so later components draw over
earlier ones. <code>zIndex</code> may be useful if you have animations or custom
modal interfaces where you don&#x27;t want this behavior.</p><p> It works like the CSS <code>z-index</code> property - components with a larger
<code>zIndex</code> will render on top. Think of the z-direction like it&#x27;s
pointing from the phone into your eyeball. See
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">https://developer.mozilla.org/en-US/docs/Web/CSS/z-index</a> for
more detail.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/vibrationios.html#content">← Prev</a><a class="docs-next" href="docs/shadow-props.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
pointing from the phone into your eyeball.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">https://developer.mozilla.org/en-US/docs/Web/CSS/z-index</a> for
more details.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/vibrationios.html#content">← Prev</a><a class="docs-next" href="docs/shadow-props.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)