mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
45 lines
71 KiB
HTML
45 lines
71 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.66">
|
|
<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">
|
|
<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" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><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.62"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.62"><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="Example"><meta data-react-helmet="true" property="og:description" content="Example"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/0.62/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.62/layout-props"><link rel="stylesheet" href="/styles.fccefeba.css">
|
|
<link rel="stylesheet" href="/main.ca40cabd.css">
|
|
<link rel="preload" href="/styles.07d522c6.js" as="script">
|
|
<link rel="preload" href="/runtime~main.373c7abc.js" as="script">
|
|
<link rel="preload" href="/main.5a3c9855.js" as="script">
|
|
<link rel="preload" href="/1.ba9ce8bd.js" as="script">
|
|
<link rel="preload" href="/2.58cb5d3d.js" as="script">
|
|
<link rel="preload" href="/1f391b9e.a824c215.js" as="script">
|
|
<link rel="preload" href="/943.8b024446.js" as="script">
|
|
<link rel="preload" href="/3225cd47.eb6210e6.js" as="script">
|
|
<link rel="preload" href="/17896441.0c201679.js" as="script">
|
|
<link rel="preload" href="/929868a8.548e7fe0.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 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 xmlns="http://www.w3.org/2000/svg" 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 class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><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.62/getting-started">0.62</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.63</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" 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 class="dropdown__link" 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.62/getting-started">Docs</a><a class="navbar__item navbar__link navbar__link--active" href="/docs/0.62/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/0.62/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_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</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"><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 class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</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 class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><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.62/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/0.62/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/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.63</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" 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 class="menu__link" 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_2UBv"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" 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 menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Core Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/components-and-apis">Core Components and APIs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/activityindicator">ActivityIndicator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/button">Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/flatlist">FlatList</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/imagebackground">ImageBackground</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/modal">Modal</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/refreshcontrol">RefreshControl</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/safeareaview">SafeAreaView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/scrollview">ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/sectionlist">SectionList</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/statusbar">StatusBar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/switch">Switch</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/text">Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/textinput">TextInput</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/touchablehighlight">TouchableHighlight</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/touchableopacity">TouchableOpacity</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/view">View</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/virtualizedlist">VirtualizedList</a></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!" tabindex="-1">Android Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/touchablenativefeedback">TouchableNativeFeedback</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!" tabindex="-1">iOS Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.62/inputaccessoryview">InputAccessoryView</a></li></ul></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Props</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.62/image-style-props">Image Style Props</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/0.62/layout-props">Layout Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.62/shadow-props">Shadow Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.62/text-style-props">Text Style Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.62/view-style-props">View Style Props</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><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.62</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.63).</div></div><div class="docItemContainer_1tAC"><article><div><span class="badge badge--secondary">Version: 0.62</span></div><header><h1 class="docTitle_cWlf">Layout Props</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="example"></a>Example<a aria-hidden="true" tabindex="-1" class="hash-link" href="#example" title="Direct link to heading">#</a></h2><p>The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property <code>flexWrap</code>. Find more detailed examples about this properties in the <a href="/docs/0.62/flexbox">Layout with Flexbox</a> docs page.</p><div class="snack-player" data-snack-name="LayoutProps Example" data-snack-description="Example usage" data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Button%2C%20ScrollView%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20flexDirections%20%3D%20%5B'row'%2C%20'row-reverse'%2C%20'column'%2C%20'column-reverse'%5D%3B%0A%20%20const%20justifyContents%20%3D%20%5B%0A%20%20%20%20'flex-start'%2C%0A%20%20%20%20'flex-end'%2C%0A%20%20%20%20'center'%2C%0A%20%20%20%20'space-between'%2C%0A%20%20%20%20'space-around'%2C%0A%20%20%20%20'space-evenly'%2C%0A%20%20%5D%3B%0A%20%20const%20alignItemsArr%20%3D%20%5B%0A%20%20%20%20'flex-start'%2C%0A%20%20%20%20'flex-end'%2C%0A%20%20%20%20'center'%2C%0A%20%20%20%20'stretch'%2C%0A%20%20%20%20'baseline'%2C%0A%20%20%5D%3B%0A%20%20const%20wraps%20%3D%20%5B'nowrap'%2C%20'wrap'%2C%20'wrap-reverse'%5D%3B%0A%20%20const%20directions%20%3D%20%5B'inherit'%2C%20'ltr'%2C%20'rtl'%5D%3B%0A%20%20const%20%5BflexDirection%2C%20setFlexDirection%5D%20%3D%20useState(0)%3B%0A%20%20const%20%5BjustifyContent%2C%20setJustifyContent%5D%20%3D%20useState(0)%3B%0A%20%20const%20%5BalignItems%2C%20setAlignItems%5D%20%3D%20useState(0)%3B%0A%20%20const%20%5Bdirection%2C%20setDirection%5D%20%3D%20useState(0)%3B%0A%20%20const%20%5Bwrap%2C%20setWrap%5D%20%3D%20useState(0)%3B%0A%0A%20%20const%20hookedStyles%20%3D%20%7B%0A%20%20%20%20flexDirection%3A%20flexDirections%5BflexDirection%5D%2C%0A%20%20%20%20justifyContent%3A%20justifyContents%5BjustifyContent%5D%2C%0A%20%20%20%20alignItems%3A%20alignItemsArr%5BalignItems%5D%2C%0A%20%20%20%20direction%3A%20directions%5Bdirection%5D%2C%0A%20%20%20%20flexWrap%3A%20wraps%5Bwrap%5D%2C%0A%20%20%7D%3B%0A%0A%20%20const%20changeSetting%20%3D%20(value%2C%20options%2C%20setterFunction)%20%3D%3E%20%7B%0A%20%20%20%20if%20(value%20%3D%3D%20options.length%20-%201)%20%7B%0A%20%20%20%20%20%20setterFunction(0)%3B%0A%20%20%20%20%20%20return%3B%0A%20%20%20%20%7D%0A%20%20%20%20setterFunction(value%20%2B%201)%3B%0A%20%20%7D%3B%0A%0A%20%20const%20Square%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20const%20sqStyle%20%3D%20%7B%0A%20%20%20%20%20%20width%3A%2050%2C%0A%20%20%20%20%20%20height%3A%2050%2C%0A%20%20%20%20%20%20backgroundColor%3A%20randomHexColor()%2C%0A%20%20%20%20%7D%3B%0A%20%20%20%20return%20%3CView%20style%3D%7BsqStyle%7D%20%2F%3E%3B%0A%20%20%7D%3B%0A%20%20const%20%5Bsquares%2C%20setSquares%5D%20%3D%20useState(%5BSquare()%2C%20Square()%2C%20Square()%5D)%3B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7B%20paddingTop%3A%20Constants.statusBarHeight%20%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.container%2C%20styles.playingSpace%2C%20hookedStyles%5D%7D%3E%0A%20%20%20%20%20%20%20%20%7Bsquares.map(elem%20%3D%3E%20elem)%7D%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CScrollView%20style%3D%7B%5Bstyles.container%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.controlSpace%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Change%20Flex%20Direction%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(flexDirection%2C%20flexDirections%2C%20setFlexDirection)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3E%7BflexDirections%5BflexDirection%5D%7D%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Change%20Justify%20Content%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20justifyContent%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20justifyContents%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setJustifyContent%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3E%7BjustifyContents%5BjustifyContent%5D%7D%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Change%20Align%20Items%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(alignItems%2C%20alignItemsArr%2C%20setAlignItems)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3E%7BalignItemsArr%5BalignItems%5D%7D%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Change%20Direction%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20changeSetting(direction%2C%20directions%2C%20setDirection)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3E%7Bdirections%5Bdirection%5D%7D%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Change%20Flex%20Wrap%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20changeSetting(wrap%2C%20wraps%2C%20setWrap)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3E%7Bwraps%5Bwrap%5D%7D%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Add%20Square%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20setSquares(%5B...squares%2C%20Square()%5D)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Delete%20Square%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setSquares(squares.filter((v%2C%20i)%20%3D%3E%20i%20!%3D%20squares.length%20-%201))%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20height%3A%20'50%25'%2C%0A%20%20%7D%2C%0A%20%20playingSpace%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'white'%2C%0A%20%20%20%20borderColor%3A%20'blue'%2C%0A%20%20%20%20borderWidth%3A%203%2C%0A%20%20%7D%2C%0A%20%20controlSpace%3A%20%7B%0A%20%20%20%20flexDirection%3A%20'row'%2C%0A%20%20%20%20flexWrap%3A%20'wrap'%2C%0A%20%20%20%20backgroundColor%3A%20'%23F5F5F5'%2C%0A%20%20%7D%2C%0A%20%20buttonView%3A%20%7B%0A%20%20%20%20width%3A%20'50%25'%2C%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%7D%2C%0A%20%20text%3A%20%7B%20textAlign%3A%20'center'%20%7D%2C%0A%7D)%3B%0A%0Aconst%20randomHexColor%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20'%23000000'.replace(%2F0%2Fg%2C%20function()%20%7B%0A%20%20%20%20return%20(~~(Math.random()%20*%2016)).toString(16)%3B%0A%20%20%7D)%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><hr><h1><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="reference"></a>Reference<a aria-hidden="true" tabindex="-1" class="hash-link" href="#reference" title="Direct link to heading">#</a></h1><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="props"></a>Props<a aria-hidden="true" tabindex="-1" class="hash-link" href="#props" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="aligncontent"></a><code>alignContent</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="alignitems"></a><code>alignItems</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="alignself"></a><code>alignSelf</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="aspectratio"></a><code>aspectRatio</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="borderbottomwidth"></a><code>borderBottomWidth</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="borderendwidth"></a><code>borderEndWidth</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="borderleftwidth"></a><code>borderLeftWidth</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="borderrightwidth"></a><code>borderRightWidth</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="borderstartwidth"></a><code>borderStartWidth</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="bordertopwidth"></a><code>borderTopWidth</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="borderwidth"></a><code>borderWidth</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="bottom"></a><code>bottom</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="direction"></a><code>direction</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="display"></a><code>display</code><a aria-hidden="true" tabindex="-1" 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 supports '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_3pqN" id="end"></a><code>end</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="flex"></a><code>flex</code><a aria-hidden="true" tabindex="-1" 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 to <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><code>flexGrow</code>, <code>flexShrink</code>, and <code>flexBasis</code> 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_3pqN" id="flexbasis"></a><code>flexBasis</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="flexdirection"></a><code>flexDirection</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="flexgrow"></a><code>flexGrow</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="flexshrink"></a><code>flexShrink</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="flexwrap"></a><code>flexWrap</code><a aria-hidden="true" tabindex="-1" 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', 'wrap-reverse')</td><td>No</td></tr></tbody></table><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="height"></a><code>height</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="justifycontent"></a><code>justifyContent</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="left"></a><code>left</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="margin"></a><code>margin</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="marginbottom"></a><code>marginBottom</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="marginend"></a><code>marginEnd</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="marginhorizontal"></a><code>marginHorizontal</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="marginleft"></a><code>marginLeft</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="marginright"></a><code>marginRight</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="marginstart"></a><code>marginStart</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="margintop"></a><code>marginTop</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="marginvertical"></a><code>marginVertical</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="maxheight"></a><code>maxHeight</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="maxwidth"></a><code>maxWidth</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="minheight"></a><code>minHeight</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="minwidth"></a><code>minWidth</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="overflow"></a><code>overflow</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="padding"></a><code>padding</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="paddingbottom"></a><code>paddingBottom</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="paddingend"></a><code>paddingEnd</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="paddinghorizontal"></a><code>paddingHorizontal</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="paddingleft"></a><code>paddingLeft</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="paddingright"></a><code>paddingRight</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="paddingstart"></a><code>paddingStart</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="paddingtop"></a><code>paddingTop</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="paddingvertical"></a><code>paddingVertical</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="position"></a><code>position</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="right"></a><code>right</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="start"></a><code>start</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="top"></a><code>top</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="width"></a><code>width</code><a aria-hidden="true" tabindex="-1" 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_3pqN" id="zindex"></a><code>zIndex</code><a aria-hidden="true" tabindex="-1" 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.62/layout-props.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><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.62/image-style-props"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Image Style Props</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/0.62/shadow-props"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Shadow Props »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#example" class="table-of-contents__link">Example</a></li><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="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2020 Facebook, Inc.</div></div></div></footer></div>
|
|
<script src="/styles.07d522c6.js"></script>
|
|
<script src="/runtime~main.373c7abc.js"></script>
|
|
<script src="/main.5a3c9855.js"></script>
|
|
<script src="/1.ba9ce8bd.js"></script>
|
|
<script src="/2.58cb5d3d.js"></script>
|
|
<script src="/1f391b9e.a824c215.js"></script>
|
|
<script src="/943.8b024446.js"></script>
|
|
<script src="/3225cd47.eb6210e6.js"></script>
|
|
<script src="/17896441.0c201679.js"></script>
|
|
<script src="/929868a8.548e7fe0.js"></script>
|
|
</body>
|
|
</html> |