mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
52 lines
61 KiB
HTML
52 lines
61 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.70">
|
|
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
|
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
|
|
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
|
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
|
<link rel="icon" href="/img/pwa/manifest-icon-512.png">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<meta name="theme-color" content="#20232a">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="#20232a">
|
|
<link rel="apple-touch-icon" href="/img/pwa/manifest-icon-512.png">
|
|
<link rel="mask-icon" href="/img/pwa/manifest-icon-512.png" color="#06bcee">
|
|
<meta name="msapplication-TileImage" href="/img/pwa/manifest-icon-512.png">
|
|
<meta name="msapplication-TileColor" content="#20232a">
|
|
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
|
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Layout Props · React Native</title><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.60"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.60"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Layout Props · React Native"><meta data-react-helmet="true" name="description" content="Reference"><meta data-react-helmet="true" property="og:description" content="Reference"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/0.60/layout-props"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/0.60/layout-props"><link rel="stylesheet" href="/styles.f56da522.css">
|
|
<link rel="stylesheet" href="/main.3de2b5ef.css">
|
|
<link rel="preload" href="/styles.9d29dd5a.js" as="script">
|
|
<link rel="preload" href="/runtime~main.b00a5634.js" as="script">
|
|
<link rel="preload" href="/main.4103a08e.js" as="script">
|
|
<link rel="preload" href="/1.7a6193e2.js" as="script">
|
|
<link rel="preload" href="/2.9b40dc51.js" as="script">
|
|
<link rel="preload" href="/1089.caa7a648.js" as="script">
|
|
<link rel="preload" href="/ae345423.7c9998ff.js" as="script">
|
|
<link rel="preload" href="/17896441.b54b3e3c.js" as="script">
|
|
<link rel="preload" href="/69f06ced.585e3c49.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
|
<nav aria-label="Skip navigation links"><button type="button" tabindex="0" class="skipToContent_3aLp">Skip to main content</button></nav><nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg aria-label="Menu" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/0.60/getting-started">0.60</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/layout-props">Next</a></li><li><a class="dropdown__link" href="/docs/layout-props">0.64</a></li><li><a class="dropdown__link" href="/docs/0.63/layout-props">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/layout-props">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/layout-props">0.61</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/0.60/layout-props">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/0.60/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/0.60/components-and-apis">Components</a><a class="navbar__item navbar__link navbar__link--active" href="/docs/0.60/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_Bh6k"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_1UDy">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_1UDy">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/0.60/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/layout-props">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/layout-props">0.64</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.63/layout-props">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/layout-props">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/layout-props">0.61</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/0.60/layout-props">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1mVJ"><div class="docSidebarContainer_uPTz" role="complementary"><div class="sidebar_M-Lc"><div class="menu menu--responsive thin-scrollbar menu_tgpy"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_1e05" width="24" height="24" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">APIs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/accessibilityinfo">AccessibilityInfo</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/actionsheetios">ActionSheetIOS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/alert">Alert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/alertios">AlertIOS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/animated">Animated</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/appregistry">AppRegistry</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/appstate">AppState</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/asyncstorage">AsyncStorage</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/backhandler">BackHandler</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/clipboard">Clipboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/datepickerandroid">DatePickerAndroid</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/dimensions">Dimensions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/easing">Easing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/imageeditor">🚧 ImageEditor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/imagepickerios">ImagePickerIOS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/image-style-props">Image Style Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/interactionmanager">InteractionManager</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/keyboard">Keyboard</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/0.60/layout-props">Layout Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/layoutanimation">LayoutAnimation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/linking">Linking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/panresponder">PanResponder</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/permissionsandroid">PermissionsAndroid</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/pixelratio">PixelRatio</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/pushnotificationios">PushNotificationIOS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/settings">Settings</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/shadow-props">Shadow Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/share">Share</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/statusbarios">StatusBarIOS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/stylesheet">StyleSheet</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/systrace">Systrace</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/text-style-props">Text Style Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/timepickerandroid">TimePickerAndroid</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/toastandroid">ToastAndroid</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/transforms">Transforms</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/vibration">Vibration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/view-style-props">View Style Props</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1zi2"><div class="container padding-vert--lg docItemWrapper_1hMI"><div class="row"><div class="col docItemCol_2AGf"><div class="alert alert--warning margin-bottom--md" role="alert"><div>This is documentation for React Native <strong>0.60</strong>, which is no longer actively maintained.</div><div class="margin-top--md">For up-to-date documentation, see the <strong><a href="/docs/layout-props">latest version</a></strong> (0.64).</div></div><div class="docItemContainer_1tAC"><article><div><span class="badge badge--secondary">Version: 0.60</span></div><header><h1 class="docTitle_cWlf">Layout Props</h1></header><div class="markdown"><h1><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="reference"></a>Reference<a class="hash-link" href="#reference" title="Direct link to heading">#</a></h1><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="props"></a>Props<a class="hash-link" href="#props" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="aligncontent"></a><code>alignContent</code><a class="hash-link" href="#aligncontent" title="Direct link to heading">#</a></h3><p><code>alignContent</code> controls how rows align in the cross direction, overriding the <code>alignContent</code> of the parent. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/align-content</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="alignitems"></a><code>alignItems</code><a class="hash-link" href="#alignitems" title="Direct link to heading">#</a></h3><p><code>alignItems</code> aligns children in the cross direction. For example, if children are flowing vertically, <code>alignItems</code> controls how they align horizontally. It works like <code>align-items</code> in CSS (default: stretch). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/align-items</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="alignself"></a><code>alignSelf</code><a class="hash-link" href="#alignself" title="Direct link to heading">#</a></h3><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 (default: auto). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/align-self</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="aspectratio"></a><code>aspectRatio</code><a class="hash-link" href="#aspectratio" title="Direct link to heading">#</a></h3><p>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.</p><ul><li>On a node with a set width/height aspect ratio controls the size of the unset dimension</li><li>On a node with a set flex basis aspect ratio controls the size of the node in the cross axis if unset</li><li>On a node with a measure function aspect ratio works as though the measure function measures the flex basis</li><li>On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis if unset</li><li>Aspect ratio takes min/max dimensions into account</li></ul><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="borderbottomwidth"></a><code>borderBottomWidth</code><a class="hash-link" href="#borderbottomwidth" title="Direct link to heading">#</a></h3><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" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="borderendwidth"></a><code>borderEndWidth</code><a class="hash-link" href="#borderendwidth" title="Direct link to heading">#</a></h3><p>When direction is <code>ltr</code>, <code>borderEndWidth</code> is equivalent to <code>borderRightWidth</code>. When direction is <code>rtl</code>, <code>borderEndWidth</code> is equivalent to <code>borderLeftWidth</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="borderleftwidth"></a><code>borderLeftWidth</code><a class="hash-link" href="#borderleftwidth" title="Direct link to heading">#</a></h3><p><code>borderLeftWidth</code> works like <code>border-left-width</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="borderrightwidth"></a><code>borderRightWidth</code><a class="hash-link" href="#borderrightwidth" title="Direct link to heading">#</a></h3><p><code>borderRightWidth</code> works like <code>border-right-width</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="borderstartwidth"></a><code>borderStartWidth</code><a class="hash-link" href="#borderstartwidth" title="Direct link to heading">#</a></h3><p>When direction is <code>ltr</code>, <code>borderStartWidth</code> is equivalent to <code>borderLeftWidth</code>. When direction is <code>rtl</code>, <code>borderStartWidth</code> is equivalent to <code>borderRightWidth</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="bordertopwidth"></a><code>borderTopWidth</code><a class="hash-link" href="#bordertopwidth" title="Direct link to heading">#</a></h3><p><code>borderTopWidth</code> works like <code>border-top-width</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="borderwidth"></a><code>borderWidth</code><a class="hash-link" href="#borderwidth" title="Direct link to heading">#</a></h3><p><code>borderWidth</code> works like <code>border-width</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/border-width</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="bottom"></a><code>bottom</code><a class="hash-link" href="#bottom" title="Direct link to heading">#</a></h3><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 points or percentages. Ems and other units are not supported.</p><p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/bottom</a> for more details of how <code>bottom</code> affects layout.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="direction"></a><code>direction</code><a class="hash-link" href="#direction" title="Direct link to heading">#</a></h3><p><code>direction</code> specifies the directional flow of the user interface. The default is <code>inherit</code>, except for root node which will have value based on the current locale. See <a href="https://yogalayout.com/docs/layout-direction" target="_blank" rel="noopener noreferrer">https://yogalayout.com/docs/layout-direction</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th><th>Platform</th></tr></thead><tbody><tr><td>enum('inherit', 'ltr', 'rtl')</td><td>No</td><td>iOS</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="display"></a><code>display</code><a class="hash-link" href="#display" title="Direct link to heading">#</a></h3><p><code>display</code> sets the display type of this component.</p><p>It works similarly to <code>display</code> in CSS, but only support 'flex' and 'none'. 'flex' is the default.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('none', 'flex')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="end"></a><code>end</code><a class="hash-link" href="#end" title="Direct link to heading">#</a></h3><p>When the direction is <code>ltr</code>, <code>end</code> is equivalent to <code>right</code>. When the direction is <code>rtl</code>, <code>end</code> is equivalent to <code>left</code>.</p><p>This style takes precedence over the <code>left</code> and <code>right</code> styles.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="flex"></a><code>flex</code><a class="hash-link" href="#flex" title="Direct link to heading">#</a></h3><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 <a href="https://github.com/facebook/yoga" target="_blank" rel="noopener noreferrer">Yoga</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. <code>flex: <positive number></code> equates to <code>flexGrow: <positive number>, flexShrink: 1, flexBasis: 0</code>.</p><p>When <code>flex</code> is 0, the component is sized according to <code>width</code> and <code>height</code> and it is inflexible.</p><p>When <code>flex</code> is -1, the component is normally sized according <code>width</code> and <code>height</code>. However, if there's not enough space, the component will shrink to its <code>minWidth</code> and <code>minHeight</code>.</p><p>flexGrow, flexShrink, and flexBasis work the same as in CSS.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="flexbasis"></a><code>flexBasis</code><a class="hash-link" href="#flexbasis" title="Direct link to heading">#</a></h3><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="flexdirection"></a><code>flexDirection</code><a class="hash-link" href="#flexdirection" title="Direct link to heading">#</a></h3><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://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('row', 'row-reverse', 'column', 'column-reverse')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="flexgrow"></a><code>flexGrow</code><a class="hash-link" href="#flexgrow" title="Direct link to heading">#</a></h3><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="flexshrink"></a><code>flexShrink</code><a class="hash-link" href="#flexshrink" title="Direct link to heading">#</a></h3><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="flexwrap"></a><code>flexWrap</code><a class="hash-link" href="#flexwrap" title="Direct link to heading">#</a></h3><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 (default: nowrap). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap</a> for more details. Note it does not work anymore with <code>alignItems: stretch</code> (the default), so you may want to use <code>alignItems: flex-start</code> for example (breaking change details: <a href="https://github.com/facebook/react-native/releases/tag/v0.28.0" target="_blank" rel="noopener noreferrer">https://github.com/facebook/react-native/releases/tag/v0.28.0</a>).</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('wrap', 'nowrap')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="height"></a><code>height</code><a class="hash-link" href="#height" title="Direct link to heading">#</a></h3><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 points or percentages. Ems and other units are not supported. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/height</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="justifycontent"></a><code>justifyContent</code><a class="hash-link" href="#justifycontent" title="Direct link to heading">#</a></h3><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 (default: flex-start). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="left"></a><code>left</code><a class="hash-link" href="#left" title="Direct link to heading">#</a></h3><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 points or percentages. Ems and other units are not supported.</p><p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/left</a> for more details of how <code>left</code> affects layout.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="margin"></a><code>margin</code><a class="hash-link" href="#margin" title="Direct link to heading">#</a></h3><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>. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/margin</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="marginbottom"></a><code>marginBottom</code><a class="hash-link" href="#marginbottom" title="Direct link to heading">#</a></h3><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" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="marginend"></a><code>marginEnd</code><a class="hash-link" href="#marginend" title="Direct link to heading">#</a></h3><p>When direction is <code>ltr</code>, <code>marginEnd</code> is equivalent to <code>marginRight</code>. When direction is <code>rtl</code>, <code>marginEnd</code> is equivalent to <code>marginLeft</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="marginhorizontal"></a><code>marginHorizontal</code><a class="hash-link" href="#marginhorizontal" title="Direct link to heading">#</a></h3><p>Setting <code>marginHorizontal</code> has the same effect as setting both <code>marginLeft</code> and <code>marginRight</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="marginleft"></a><code>marginLeft</code><a class="hash-link" href="#marginleft" title="Direct link to heading">#</a></h3><p><code>marginLeft</code> works like <code>margin-left</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="marginright"></a><code>marginRight</code><a class="hash-link" href="#marginright" title="Direct link to heading">#</a></h3><p><code>marginRight</code> works like <code>margin-right</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="marginstart"></a><code>marginStart</code><a class="hash-link" href="#marginstart" title="Direct link to heading">#</a></h3><p>When direction is <code>ltr</code>, <code>marginStart</code> is equivalent to <code>marginLeft</code>. When direction is <code>rtl</code>, <code>marginStart</code> is equivalent to <code>marginRight</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="margintop"></a><code>marginTop</code><a class="hash-link" href="#margintop" title="Direct link to heading">#</a></h3><p><code>marginTop</code> works like <code>margin-top</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="marginvertical"></a><code>marginVertical</code><a class="hash-link" href="#marginvertical" title="Direct link to heading">#</a></h3><p>Setting <code>marginVertical</code> has the same effect as setting both <code>marginTop</code> and <code>marginBottom</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="maxheight"></a><code>maxHeight</code><a class="hash-link" href="#maxheight" title="Direct link to heading">#</a></h3><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 points or percentages. Ems and other units are not supported.</p><p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/max-height</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="maxwidth"></a><code>maxWidth</code><a class="hash-link" href="#maxwidth" title="Direct link to heading">#</a></h3><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 points or percentages. Ems and other units are not supported.</p><p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/max-width</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="minheight"></a><code>minHeight</code><a class="hash-link" href="#minheight" title="Direct link to heading">#</a></h3><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 points or percentages. Ems and other units are not supported.</p><p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/min-height</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="minwidth"></a><code>minWidth</code><a class="hash-link" href="#minwidth" title="Direct link to heading">#</a></h3><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 points or percentages. Ems and other units are not supported.</p><p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/min-width</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="overflow"></a><code>overflow</code><a class="hash-link" href="#overflow" title="Direct link to heading">#</a></h3><p><code>overflow</code> controls how children are measured and displayed. <code>overflow: hidden</code> causes views to be clipped while <code>overflow: scroll</code> causes views to be measured independently of their parents main axis. It works like <code>overflow</code> in CSS (default: visible). See <a href="https://developer.mozilla.org/en/docs/Web/CSS/overflow" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en/docs/Web/CSS/overflow</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('visible', 'hidden', 'scroll')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="padding"></a><code>padding</code><a class="hash-link" href="#padding" title="Direct link to heading">#</a></h3><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" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/padding</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="paddingbottom"></a><code>paddingBottom</code><a class="hash-link" href="#paddingbottom" title="Direct link to heading">#</a></h3><p><code>paddingBottom</code> works like <code>padding-bottom</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="paddingend"></a><code>paddingEnd</code><a class="hash-link" href="#paddingend" title="Direct link to heading">#</a></h3><p>When direction is <code>ltr</code>, <code>paddingEnd</code> is equivalent to <code>paddingRight</code>. When direction is <code>rtl</code>, <code>paddingEnd</code> is equivalent to <code>paddingLeft</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="paddinghorizontal"></a><code>paddingHorizontal</code><a class="hash-link" href="#paddinghorizontal" title="Direct link to heading">#</a></h3><p>Setting <code>paddingHorizontal</code> is like setting both of <code>paddingLeft</code> and <code>paddingRight</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="paddingleft"></a><code>paddingLeft</code><a class="hash-link" href="#paddingleft" title="Direct link to heading">#</a></h3><p><code>paddingLeft</code> works like <code>padding-left</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="paddingright"></a><code>paddingRight</code><a class="hash-link" href="#paddingright" title="Direct link to heading">#</a></h3><p><code>paddingRight</code> works like <code>padding-right</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="paddingstart"></a><code>paddingStart</code><a class="hash-link" href="#paddingstart" title="Direct link to heading">#</a></h3><p>When direction is <code>ltr</code>, <code>paddingStart</code> is equivalent to <code>paddingLeft</code>. When direction is <code>rtl</code>, <code>paddingStart</code> is equivalent to <code>paddingRight</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="paddingtop"></a><code>paddingTop</code><a class="hash-link" href="#paddingtop" title="Direct link to heading">#</a></h3><p><code>paddingTop</code> works like <code>padding-top</code> in CSS. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, ,string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="paddingvertical"></a><code>paddingVertical</code><a class="hash-link" href="#paddingvertical" title="Direct link to heading">#</a></h3><p>Setting <code>paddingVertical</code> is like setting both of <code>paddingTop</code> and <code>paddingBottom</code>.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="position"></a><code>position</code><a class="hash-link" href="#position" title="Direct link to heading">#</a></h3><p><code>position</code> in React Native is similar to regular CSS, but everything is set to <code>relative</code> by default, so <code>absolute</code> positioning is always relative to the parent.</p><p>If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have <code>absolute</code> position.</p><p>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.</p><p>See <a href="https://github.com/facebook/yoga" target="_blank" rel="noopener noreferrer">https://github.com/facebook/yoga</a> for more details on how <code>position</code> differs between React Native and CSS.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>enum('absolute', 'relative')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="right"></a><code>right</code><a class="hash-link" href="#right" title="Direct link to heading">#</a></h3><p><code>right</code> is the number of logical pixels to offset the right edge of this component.</p><p>It works similarly to <code>right</code> in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.</p><p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/right" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/right</a> for more details of how <code>right</code> affects layout.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="start"></a><code>start</code><a class="hash-link" href="#start" title="Direct link to heading">#</a></h3><p>When the direction is <code>ltr</code>, <code>start</code> is equivalent to <code>left</code>. When the direction is <code>rtl</code>, <code>start</code> is equivalent to <code>right</code>.</p><p>This style takes precedence over the <code>left</code>, <code>right</code>, and <code>end</code> styles.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="top"></a><code>top</code><a class="hash-link" href="#top" title="Direct link to heading">#</a></h3><p><code>top</code> is the number of logical pixels to offset the top edge of this component.</p><p>It works similarly to <code>top</code> in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.</p><p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/top</a> for more details of how <code>top</code> affects layout.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="width"></a><code>width</code><a class="hash-link" href="#width" title="Direct link to heading">#</a></h3><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 points or percentages. Ems and other units are not supported. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/width</a> for more details.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number, string</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="zindex"></a><code>zIndex</code><a class="hash-link" href="#zindex" title="Direct link to heading">#</a></h3><p><code>zIndex</code> controls which components display on top of others. Normally, you don'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'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's pointing from the phone into your eyeball. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/z-index</a> for more details.</p><p>On iOS, <code>zIndex</code> may require <code>View</code>s to be siblings of each other for it to work as expected.</p><table><thead><tr><th>Type</th><th>Required</th></tr></thead><tbody><tr><td>number</td><td>No</td></tr></tbody></table><hr></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.60/layout-props.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 40 40" class="iconEdit_2Hwv"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-10-29T04:19:29.000Z" class="docLastUpdatedAt_1gIo">10/29/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/0.60/keyboard"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Keyboard</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/0.60/layoutanimation"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">LayoutAnimation »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_1zTD thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link">Props</a><ul><li><a href="#aligncontent" class="table-of-contents__link"><code>alignContent</code></a></li><li><a href="#alignitems" class="table-of-contents__link"><code>alignItems</code></a></li><li><a href="#alignself" class="table-of-contents__link"><code>alignSelf</code></a></li><li><a href="#aspectratio" class="table-of-contents__link"><code>aspectRatio</code></a></li><li><a href="#borderbottomwidth" class="table-of-contents__link"><code>borderBottomWidth</code></a></li><li><a href="#borderendwidth" class="table-of-contents__link"><code>borderEndWidth</code></a></li><li><a href="#borderleftwidth" class="table-of-contents__link"><code>borderLeftWidth</code></a></li><li><a href="#borderrightwidth" class="table-of-contents__link"><code>borderRightWidth</code></a></li><li><a href="#borderstartwidth" class="table-of-contents__link"><code>borderStartWidth</code></a></li><li><a href="#bordertopwidth" class="table-of-contents__link"><code>borderTopWidth</code></a></li><li><a href="#borderwidth" class="table-of-contents__link"><code>borderWidth</code></a></li><li><a href="#bottom" class="table-of-contents__link"><code>bottom</code></a></li><li><a href="#direction" class="table-of-contents__link"><code>direction</code></a></li><li><a href="#display" class="table-of-contents__link"><code>display</code></a></li><li><a href="#end" class="table-of-contents__link"><code>end</code></a></li><li><a href="#flex" class="table-of-contents__link"><code>flex</code></a></li><li><a href="#flexbasis" class="table-of-contents__link"><code>flexBasis</code></a></li><li><a href="#flexdirection" class="table-of-contents__link"><code>flexDirection</code></a></li><li><a href="#flexgrow" class="table-of-contents__link"><code>flexGrow</code></a></li><li><a href="#flexshrink" class="table-of-contents__link"><code>flexShrink</code></a></li><li><a href="#flexwrap" class="table-of-contents__link"><code>flexWrap</code></a></li><li><a href="#height" class="table-of-contents__link"><code>height</code></a></li><li><a href="#justifycontent" class="table-of-contents__link"><code>justifyContent</code></a></li><li><a href="#left" class="table-of-contents__link"><code>left</code></a></li><li><a href="#margin" class="table-of-contents__link"><code>margin</code></a></li><li><a href="#marginbottom" class="table-of-contents__link"><code>marginBottom</code></a></li><li><a href="#marginend" class="table-of-contents__link"><code>marginEnd</code></a></li><li><a href="#marginhorizontal" class="table-of-contents__link"><code>marginHorizontal</code></a></li><li><a href="#marginleft" class="table-of-contents__link"><code>marginLeft</code></a></li><li><a href="#marginright" class="table-of-contents__link"><code>marginRight</code></a></li><li><a href="#marginstart" class="table-of-contents__link"><code>marginStart</code></a></li><li><a href="#margintop" class="table-of-contents__link"><code>marginTop</code></a></li><li><a href="#marginvertical" class="table-of-contents__link"><code>marginVertical</code></a></li><li><a href="#maxheight" class="table-of-contents__link"><code>maxHeight</code></a></li><li><a href="#maxwidth" class="table-of-contents__link"><code>maxWidth</code></a></li><li><a href="#minheight" class="table-of-contents__link"><code>minHeight</code></a></li><li><a href="#minwidth" class="table-of-contents__link"><code>minWidth</code></a></li><li><a href="#overflow" class="table-of-contents__link"><code>overflow</code></a></li><li><a href="#padding" class="table-of-contents__link"><code>padding</code></a></li><li><a href="#paddingbottom" class="table-of-contents__link"><code>paddingBottom</code></a></li><li><a href="#paddingend" class="table-of-contents__link"><code>paddingEnd</code></a></li><li><a href="#paddinghorizontal" class="table-of-contents__link"><code>paddingHorizontal</code></a></li><li><a href="#paddingleft" class="table-of-contents__link"><code>paddingLeft</code></a></li><li><a href="#paddingright" class="table-of-contents__link"><code>paddingRight</code></a></li><li><a href="#paddingstart" class="table-of-contents__link"><code>paddingStart</code></a></li><li><a href="#paddingtop" class="table-of-contents__link"><code>paddingTop</code></a></li><li><a href="#paddingvertical" class="table-of-contents__link"><code>paddingVertical</code></a></li><li><a href="#position" class="table-of-contents__link"><code>position</code></a></li><li><a href="#right" class="table-of-contents__link"><code>right</code></a></li><li><a href="#start" class="table-of-contents__link"><code>start</code></a></li><li><a href="#top" class="table-of-contents__link"><code>top</code></a></li><li><a href="#width" class="table-of-contents__link"><code>width</code></a></li><li><a href="#zindex" class="table-of-contents__link"><code>zIndex</code></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_3cAK"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div class="footer__copyright">Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
|
|
<script src="/styles.9d29dd5a.js"></script>
|
|
<script src="/runtime~main.b00a5634.js"></script>
|
|
<script src="/main.4103a08e.js"></script>
|
|
<script src="/1.7a6193e2.js"></script>
|
|
<script src="/2.9b40dc51.js"></script>
|
|
<script src="/1089.caa7a648.js"></script>
|
|
<script src="/ae345423.7c9998ff.js"></script>
|
|
<script src="/17896441.b54b3e3c.js"></script>
|
|
<script src="/69f06ced.585e3c49.js"></script>
|
|
</body>
|
|
</html> |