this repo has no description
kitten.sh
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-layout-props" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Layout Props · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/layout-props><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="Layout Props · React Native"><meta data-rh=true name=description content="More detailed examples about those properties can be found on the Layout with Flexbox page."><meta data-rh=true property=og:description content="More detailed examples about those properties can be found on the Layout with Flexbox page."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/layout-props><link data-rh=true rel=alternate href=https://reactnative.dev/docs/layout-props hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/layout-props hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON 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=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</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></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs>
2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
3</defs></svg>
4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/layout-props>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/layout-props>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/layout-props>0.79</a><li><a class=dropdown__link href=/docs/0.78/layout-props>0.78</a><li><a class=dropdown__link href=/docs/0.77/layout-props>0.77</a><li><a class=dropdown__link href=/docs/0.76/layout-props>0.76</a><li><a class=dropdown__link href=/docs/0.75/layout-props>0.75</a><li><a class=dropdown__link href=/docs/0.74/layout-props>0.74</a><li><a class=dropdown__link href=/docs/0.73/layout-props>0.73</a><li><a class=dropdown__link href=/docs/0.72/layout-props>0.72</a><li><a class=dropdown__link href=/docs/0.71/layout-props>0.71</a><li><a class=dropdown__link href=/docs/0.70/layout-props>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/getting-started>Guides</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</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="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><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 /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/components-and-apis>Core Components</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/image-style-props>Props</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/image-style-props>Image Style Props</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/layout-props>Layout Props</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/shadow-props>Shadow Props</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/text-style-props>Text Style Props</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/view-style-props>View Style Props</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/boxshadowvalue>Object Types</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Layout Props</h1></header><blockquote>
5<p>More detailed examples about those properties can be found on the <a href=/docs/flexbox>Layout with Flexbox</a> page.</p>
6</blockquote>
7<h3 class="anchor anchorWithStickyNavbar_JmGV" id=example>Example<a href=#example class=hash-link aria-label="Direct link to Example" title="Direct link to Example"></a></h3>
8<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>.</p>
9<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">TypeScript<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">JavaScript</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb hidden><div class=snack-player data-snack-name="LayoutProps Example" data-snack-description="Example usage" data-snack-files="%7B%22App.js%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7BButton%2C%20ScrollView%2C%20StyleSheet%2C%20Text%2C%20View%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BflexDirection%2C%20setFlexDirection%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BjustifyContent%2C%20setJustifyContent%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BalignItems%2C%20setAlignItems%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5Bdirection%2C%20setDirection%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5Bwrap%2C%20setWrap%5D%20%3D%20useState(0)%3B%5Cn%5Cn%20%20const%20%5Bsquares%2C%20setSquares%5D%20%3D%20useState(%5B%3CSquare%20%2F%3E%2C%20%3CSquare%20%2F%3E%2C%20%3CSquare%20%2F%3E%5D)%3B%5Cn%5Cn%20%20const%20hookedStyles%20%3D%20%7B%5Cn%20%20%20%20flexDirection%3A%20flexDirections%5BflexDirection%5D%2C%5Cn%20%20%20%20justifyContent%3A%20justifyContents%5BjustifyContent%5D%2C%5Cn%20%20%20%20alignItems%3A%20alignItemsArr%5BalignItems%5D%2C%5Cn%20%20%20%20direction%3A%20directions%5Bdirection%5D%2C%5Cn%20%20%20%20flexWrap%3A%20wraps%5Bwrap%5D%2C%5Cn%20%20%7D%3B%5Cn%5Cn%20%20const%20changeSetting%20%3D%20(value%2C%20options%2C%20setterFunction)%20%3D%3E%20%7B%5Cn%20%20%20%20if%20(value%20%3D%3D%3D%20options.length%20-%201)%20%7B%5Cn%20%20%20%20%20%20setterFunction(0)%3B%5Cn%20%20%20%20%20%20return%3B%5Cn%20%20%20%20%7D%5Cn%20%20%20%20setterFunction(value%20%2B%201)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.container%2C%20styles.playingSpace%2C%20hookedStyles%5D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%7Bsquares.map(elem%20%3D%3E%20elem)%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CScrollView%20style%3D%7Bstyles.layoutContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.controlSpace%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Flex%20Direction%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(flexDirection%2C%20flexDirections%2C%20setFlexDirection)%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Justify%20Content%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20justifyContent%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20justifyContents%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setJustifyContent%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Align%20Items%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(alignItems%2C%20alignItemsArr%2C%20setAlignItems)%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Direction%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(direction%2C%20directions%2C%20setDirection)%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Flex%20Wrap%5C%22%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Add%20Square%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20setSquares(%5B...squares%2C%20%3CSquare%20%2F%3E%5D)%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Delete%20Square%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%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%3D%20squares.length%20-%201))%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20flexDirections%20%3D%20%5B'row'%2C%20'row-reverse'%2C%20'column'%2C%20'column-reverse'%5D%3B%5Cnconst%20justifyContents%20%3D%20%5B%5Cn%20%20'flex-start'%2C%5Cn%20%20'flex-end'%2C%5Cn%20%20'center'%2C%5Cn%20%20'space-between'%2C%5Cn%20%20'space-around'%2C%5Cn%20%20'space-evenly'%2C%5Cn%5D%3B%5Cnconst%20alignItemsArr%20%3D%20%5B%5Cn%20%20'flex-start'%2C%5Cn%20%20'flex-end'%2C%5Cn%20%20'center'%2C%5Cn%20%20'stretch'%2C%5Cn%20%20'baseline'%2C%5Cn%5D%3B%5Cnconst%20wraps%20%3D%20%5B'nowrap'%2C%20'wrap'%2C%20'wrap-reverse'%5D%3B%5Cnconst%20directions%20%3D%20%5B'inherit'%2C%20'ltr'%2C%20'rtl'%5D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%7D%2C%5Cn%20%20layoutContainer%3A%20%7B%5Cn%20%20%20%20flex%3A%200.5%2C%5Cn%20%20%7D%2C%5Cn%20%20playingSpace%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'white'%2C%5Cn%20%20%20%20borderColor%3A%20'blue'%2C%5Cn%20%20%20%20borderWidth%3A%203%2C%5Cn%20%20%20%20overflow%3A%20'hidden'%2C%5Cn%20%20%7D%2C%5Cn%20%20controlSpace%3A%20%7B%5Cn%20%20%20%20flexDirection%3A%20'row'%2C%5Cn%20%20%20%20flexWrap%3A%20'wrap'%2C%5Cn%20%20%7D%2C%5Cn%20%20buttonView%3A%20%7B%5Cn%20%20%20%20width%3A%20'50%25'%2C%5Cn%20%20%20%20padding%3A%2010%2C%5Cn%20%20%7D%2C%5Cn%20%20text%3A%20%7B%5Cn%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnconst%20Square%20%3D%20()%20%3D%3E%20(%5Cn%20%20%3CView%5Cn%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20width%3A%2050%2C%5Cn%20%20%20%20%20%20height%3A%2050%2C%5Cn%20%20%20%20%20%20backgroundColor%3A%20randomHexColor()%2C%5Cn%20%20%20%20%7D%7D%5Cn%20%20%2F%3E%5Cn)%3B%5Cn%5Cnconst%20randomHexColor%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20'%23000000'.replace(%2F0%2Fg%2C%20()%20%3D%3E%20%7B%5Cn%20%20%20%20return%20Math.round(Math.random()%20*%2014).toString(16)%3B%5Cn%20%20%7D)%3B%5Cn%7D%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div><div role=tabpanel class=tabItem_wHwb><div class=snack-player data-snack-name="LayoutProps Example" data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20Button%2C%5Cn%20%20ScrollView%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Text%2C%5Cn%20%20View%2C%5Cn%20%20FlexAlignType%2C%5Cn%20%20FlexStyle%2C%5Cn%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BflexDirection%2C%20setFlexDirection%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BjustifyContent%2C%20setJustifyContent%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5BalignItems%2C%20setAlignItems%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5Bdirection%2C%20setDirection%5D%20%3D%20useState(0)%3B%5Cn%20%20const%20%5Bwrap%2C%20setWrap%5D%20%3D%20useState(0)%3B%5Cn%5Cn%20%20const%20%5Bsquares%2C%20setSquares%5D%20%3D%20useState(%5B%3CSquare%20%2F%3E%2C%20%3CSquare%20%2F%3E%2C%20%3CSquare%20%2F%3E%5D)%3B%5Cn%5Cn%20%20const%20hookedStyles%20%3D%20%7B%5Cn%20%20%20%20flexDirection%3A%20flexDirections%5BflexDirection%5D%2C%5Cn%20%20%20%20justifyContent%3A%20justifyContents%5BjustifyContent%5D%2C%5Cn%20%20%20%20alignItems%3A%20alignItemsArr%5BalignItems%5D%2C%5Cn%20%20%20%20direction%3A%20directions%5Bdirection%5D%2C%5Cn%20%20%20%20flexWrap%3A%20wraps%5Bwrap%5D%2C%5Cn%20%20%7D%20as%20FlexStyle%3B%5Cn%5Cn%20%20const%20changeSetting%20%3D%20(%5Cn%20%20%20%20value%3A%20number%2C%5Cn%20%20%20%20options%3A%20any%5B%5D%2C%5Cn%20%20%20%20setterFunction%3A%20(index%3A%20number)%20%3D%3E%20void%2C%5Cn%20%20)%20%3D%3E%20%7B%5Cn%20%20%20%20if%20(value%20%3D%3D%3D%20options.length%20-%201)%20%7B%5Cn%20%20%20%20%20%20setterFunction(0)%3B%5Cn%20%20%20%20%20%20return%3B%5Cn%20%20%20%20%7D%5Cn%20%20%20%20setterFunction(value%20%2B%201)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.container%2C%20styles.playingSpace%2C%20hookedStyles%5D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%7Bsquares.map(elem%20%3D%3E%20elem)%7D%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3CScrollView%20style%3D%7Bstyles.layoutContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.controlSpace%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Flex%20Direction%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(flexDirection%2C%20flexDirections%2C%20setFlexDirection)%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Justify%20Content%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20justifyContent%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20justifyContents%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setJustifyContent%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Align%20Items%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(alignItems%2C%20alignItemsArr%2C%20setAlignItems)%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Direction%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20changeSetting(direction%2C%20directions%2C%20setDirection)%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Change%20Flex%20Wrap%5C%22%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%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%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Add%20Square%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20setSquares(%5B...squares%2C%20%3CSquare%20%2F%3E%5D)%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonView%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3D%5C%22Delete%20Square%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%5Cn%20%20%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%3D%20squares.length%20-%201))%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20flexDirections%20%3D%20%5B%5Cn%20%20'row'%2C%5Cn%20%20'row-reverse'%2C%5Cn%20%20'column'%2C%5Cn%20%20'column-reverse'%2C%5Cn%5D%20as%20FlexStyle%5B'flexDirection'%5D%5B%5D%3B%5Cnconst%20justifyContents%20%3D%20%5B%5Cn%20%20'flex-start'%2C%5Cn%20%20'flex-end'%2C%5Cn%20%20'center'%2C%5Cn%20%20'space-between'%2C%5Cn%20%20'space-around'%2C%5Cn%20%20'space-evenly'%2C%5Cn%5D%20as%20FlexStyle%5B'justifyContent'%5D%5B%5D%3B%5Cnconst%20alignItemsArr%20%3D%20%5B%5Cn%20%20'flex-start'%2C%5Cn%20%20'flex-end'%2C%5Cn%20%20'center'%2C%5Cn%20%20'stretch'%2C%5Cn%20%20'baseline'%2C%5Cn%5D%20as%20FlexAlignType%5B%5D%3B%5Cnconst%20wraps%20%3D%20%5B'nowrap'%2C%20'wrap'%2C%20'wrap-reverse'%5D%3B%5Cnconst%20directions%20%3D%20%5B'inherit'%2C%20'ltr'%2C%20'rtl'%5D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%7D%2C%5Cn%20%20layoutContainer%3A%20%7B%5Cn%20%20%20%20flex%3A%200.5%2C%5Cn%20%20%7D%2C%5Cn%20%20playingSpace%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'white'%2C%5Cn%20%20%20%20borderColor%3A%20'blue'%2C%5Cn%20%20%20%20borderWidth%3A%203%2C%5Cn%20%20%20%20overflow%3A%20'hidden'%2C%5Cn%20%20%7D%2C%5Cn%20%20controlSpace%3A%20%7B%5Cn%20%20%20%20flexDirection%3A%20'row'%2C%5Cn%20%20%20%20flexWrap%3A%20'wrap'%2C%5Cn%20%20%7D%2C%5Cn%20%20buttonView%3A%20%7B%5Cn%20%20%20%20width%3A%20'50%25'%2C%5Cn%20%20%20%20padding%3A%2010%2C%5Cn%20%20%7D%2C%5Cn%20%20text%3A%20%7B%5Cn%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnconst%20Square%20%3D%20()%20%3D%3E%20(%5Cn%20%20%3CView%5Cn%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20width%3A%2050%2C%5Cn%20%20%20%20%20%20height%3A%2050%2C%5Cn%20%20%20%20%20%20backgroundColor%3A%20randomHexColor()%2C%5Cn%20%20%20%20%7D%7D%5Cn%20%20%2F%3E%5Cn)%3B%5Cn%5Cnconst%20randomHexColor%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20'%23000000'.replace(%2F0%2Fg%2C%20()%20%3D%3E%20%7B%5Cn%20%20%20%20return%20Math.round(Math.random()%20*%2014).toString(16)%3B%5Cn%20%20%7D)%3B%5Cn%7D%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div></div></div>
10<hr>
11<h1>Reference</h1>
12<h2 class="anchor anchorWithStickyNavbar_JmGV" id=props>Props<a href=#props class=hash-link aria-label="Direct link to Props" title="Direct link to Props"></a></h2>
13<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aligncontent><code>alignContent</code><a href=#aligncontent class=hash-link aria-label="Direct link to aligncontent" title="Direct link to aligncontent"></a></h3>
14<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>
15<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly')<td>No</table>
16<hr>
17<h3 class="anchor anchorWithStickyNavbar_JmGV" id=alignitems><code>alignItems</code><a href=#alignitems class=hash-link aria-label="Direct link to alignitems" title="Direct link to alignitems"></a></h3>
18<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>
19<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')<td>No</table>
20<hr>
21<h3 class="anchor anchorWithStickyNavbar_JmGV" id=alignself><code>alignSelf</code><a href=#alignself class=hash-link aria-label="Direct link to alignself" title="Direct link to alignself"></a></h3>
22<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>
23<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')<td>No</table>
24<hr>
25<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aspectratio><code>aspectRatio</code><a href=#aspectratio class=hash-link aria-label="Direct link to aspectratio" title="Direct link to aspectratio"></a></h3>
26<p>Aspect ratio controls the size of the undefined dimension of a node. See <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio target=_blank rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio</a> for more details.</p>
27<ul>
28<li>On a node with a set width/height, aspect ratio controls the size of the unset dimension</li>
29<li>On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset</li>
30<li>On a node with a measure function, aspect ratio works as though the measure function measures the flex basis</li>
31<li>On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset</li>
32<li>Aspect ratio takes min/max dimensions into account</li>
33</ul>
34<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
35<hr>
36<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderbottomwidth><code>borderBottomWidth</code><a href=#borderbottomwidth class=hash-link aria-label="Direct link to borderbottomwidth" title="Direct link to borderbottomwidth"></a></h3>
37<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>
38<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
39<hr>
40<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderendwidth><code>borderEndWidth</code><a href=#borderendwidth class=hash-link aria-label="Direct link to borderendwidth" title="Direct link to borderendwidth"></a></h3>
41<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>
42<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
43<hr>
44<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderleftwidth><code>borderLeftWidth</code><a href=#borderleftwidth class=hash-link aria-label="Direct link to borderleftwidth" title="Direct link to borderleftwidth"></a></h3>
45<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>
46<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
47<hr>
48<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderrightwidth><code>borderRightWidth</code><a href=#borderrightwidth class=hash-link aria-label="Direct link to borderrightwidth" title="Direct link to borderrightwidth"></a></h3>
49<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>
50<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
51<hr>
52<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderstartwidth><code>borderStartWidth</code><a href=#borderstartwidth class=hash-link aria-label="Direct link to borderstartwidth" title="Direct link to borderstartwidth"></a></h3>
53<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>
54<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
55<hr>
56<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordertopwidth><code>borderTopWidth</code><a href=#bordertopwidth class=hash-link aria-label="Direct link to bordertopwidth" title="Direct link to bordertopwidth"></a></h3>
57<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>
58<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
59<hr>
60<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderwidth><code>borderWidth</code><a href=#borderwidth class=hash-link aria-label="Direct link to borderwidth" title="Direct link to borderwidth"></a></h3>
61<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>
62<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
63<hr>
64<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bottom><code>bottom</code><a href=#bottom class=hash-link aria-label="Direct link to bottom" title="Direct link to bottom"></a></h3>
65<p><code>bottom</code> is the number of logical pixels to offset the bottom edge of this component.</p>
66<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>
67<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>
68<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
69<hr>
70<h3 class="anchor anchorWithStickyNavbar_JmGV" id=boxsizing><code>boxSizing</code><a href=#boxsizing class=hash-link aria-label="Direct link to boxsizing" title="Direct link to boxsizing"></a></h3>
71<p><code>boxSizing</code> defines how the element's various sizing props (<code>width</code>, <code>height</code>, <code>minWidth</code>, <code>minHeight</code>, etc.) are computed. If <code>boxSizing</code> is <code>border-box</code>, these sizes apply to the border box of the element. If it is <code>content-box</code>, they apply to the content box of the element. The default value is <code>border-box</code>. The <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing target=_blank rel="noopener noreferrer">web documentation</a> is a good source of information if you wish to learn more about how this prop works.</p>
72<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('border-box', 'content-box')<td>No</table>
73<hr>
74<h3 class="anchor anchorWithStickyNavbar_JmGV" id=columngap><code>columnGap</code><a href=#columngap class=hash-link aria-label="Direct link to columngap" title="Direct link to columngap"></a></h3>
75<p><code>columnGap</code> works like <code>column-gap</code> in CSS. Only pixel units are supported in React Native. See <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap target=_blank rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap</a> for more details.</p>
76<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
77<hr>
78<h3 class="anchor anchorWithStickyNavbar_JmGV" id=direction><code>direction</code><a href=#direction class=hash-link aria-label="Direct link to direction" title="Direct link to direction"></a></h3>
79<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://www.yogalayout.dev/docs/styling/layout-direction target=_blank rel="noopener noreferrer">https://www.yogalayout.dev/docs/styling/layout-direction</a> for more details.</p>
80<table><thead><tr><th>Type<th>Required<th>Platform<tbody><tr><td>enum('inherit', 'ltr', 'rtl')<td>No<td>iOS</table>
81<hr>
82<h3 class="anchor anchorWithStickyNavbar_JmGV" id=display><code>display</code><a href=#display class=hash-link aria-label="Direct link to display" title="Direct link to display"></a></h3>
83<p><code>display</code> sets the display type of this component.</p>
84<p>It works similarly to <code>display</code> in CSS but only supports the values 'flex', 'none', and 'contents'. The default is <code>flex</code>.</p>
85<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('none', 'flex', 'contents')<td>No</table>
86<hr>
87<h3 class="anchor anchorWithStickyNavbar_JmGV" id=end><code>end</code><a href=#end class=hash-link aria-label="Direct link to end" title="Direct link to end"></a></h3>
88<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>
89<p>This style takes precedence over the <code>left</code> and <code>right</code> styles.</p>
90<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
91<hr>
92<h3 class="anchor anchorWithStickyNavbar_JmGV" id=flex><code>flex</code><a href=#flex class=hash-link aria-label="Direct link to flex" title="Direct link to flex"></a></h3>
93<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> layout engine.</p>
94<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>
95<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>
96<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>
97<p><code>flexGrow</code>, <code>flexShrink</code>, and <code>flexBasis</code> work the same as in CSS.</p>
98<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
99<hr>
100<h3 class="anchor anchorWithStickyNavbar_JmGV" id=flexbasis><code>flexBasis</code><a href=#flexbasis class=hash-link aria-label="Direct link to flexbasis" title="Direct link to flexbasis"></a></h3>
101<p><code>flexBasis</code> is an axis-independent way of providing the default size of an item along the main axis. Setting the <code>flexBasis</code> of a child is similar to setting the <code>width</code> of that child if its parent is a container with <code>flexDirection: row</code> or setting the <code>height</code> of a child if its parent is a container with <code>flexDirection: column</code>. The <code>flexBasis</code> of an item is the default size of that item, the size of the item before any <code>flexGrow</code> and <code>flexShrink</code> calculations are performed.</p>
102<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
103<hr>
104<h3 class="anchor anchorWithStickyNavbar_JmGV" id=flexdirection><code>flexDirection</code><a href=#flexdirection class=hash-link aria-label="Direct link to flexdirection" title="Direct link to flexdirection"></a></h3>
105<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>
106<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('row', 'row-reverse', 'column', 'column-reverse')<td>No</table>
107<hr>
108<h3 class="anchor anchorWithStickyNavbar_JmGV" id=flexgrow><code>flexGrow</code><a href=#flexgrow class=hash-link aria-label="Direct link to flexgrow" title="Direct link to flexgrow"></a></h3>
109<p><code>flexGrow</code> describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.</p>
110<p><code>flexGrow</code> accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s <code>flexGrow</code> values.</p>
111<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
112<hr>
113<h3 class="anchor anchorWithStickyNavbar_JmGV" id=flexshrink><code>flexShrink</code><a href=#flexshrink class=hash-link aria-label="Direct link to flexshrink" title="Direct link to flexshrink"></a></h3>
114<p><a href=/docs/layout-props#flexshrink><code>flexShrink</code></a> describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. <code>flexShrink</code> is very similar to <code>flexGrow</code> and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.</p>
115<p><code>flexShrink</code> accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s <code>flexShrink</code> values.</p>
116<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
117<hr>
118<h3 class="anchor anchorWithStickyNavbar_JmGV" id=flexwrap><code>flexWrap</code><a href=#flexwrap class=hash-link aria-label="Direct link to flexwrap" title="Direct link to flexwrap"></a></h3>
119<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>
120<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('wrap', 'nowrap', 'wrap-reverse')<td>No</table>
121<hr>
122<h3 class="anchor anchorWithStickyNavbar_JmGV" id=gap><code>gap</code><a href=#gap class=hash-link aria-label="Direct link to gap" title="Direct link to gap"></a></h3>
123<p><code>gap</code> works like <code>gap</code> in CSS. Only pixel units are supported in React Native. See <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/gap target=_blank rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/gap</a> for more details.</p>
124<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
125<hr>
126<h3 class="anchor anchorWithStickyNavbar_JmGV" id=height><code>height</code><a href=#height class=hash-link aria-label="Direct link to height" title="Direct link to height"></a></h3>
127<p><code>height</code> sets the height of this component.</p>
128<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>
129<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
130<hr>
131<h3 class="anchor anchorWithStickyNavbar_JmGV" id=justifycontent><code>justifyContent</code><a href=#justifycontent class=hash-link aria-label="Direct link to justifycontent" title="Direct link to justifycontent"></a></h3>
132<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>
133<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')<td>No</table>
134<hr>
135<h3 class="anchor anchorWithStickyNavbar_JmGV" id=left><code>left</code><a href=#left class=hash-link aria-label="Direct link to left" title="Direct link to left"></a></h3>
136<p><code>left</code> is the number of logical pixels to offset the left edge of this component.</p>
137<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>
138<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>
139<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
140<hr>
141<h3 class="anchor anchorWithStickyNavbar_JmGV" id=margin><code>margin</code><a href=#margin class=hash-link aria-label="Direct link to margin" title="Direct link to margin"></a></h3>
142<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>
143<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
144<hr>
145<h3 class="anchor anchorWithStickyNavbar_JmGV" id=marginbottom><code>marginBottom</code><a href=#marginbottom class=hash-link aria-label="Direct link to marginbottom" title="Direct link to marginbottom"></a></h3>
146<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>
147<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
148<hr>
149<h3 class="anchor anchorWithStickyNavbar_JmGV" id=marginend><code>marginEnd</code><a href=#marginend class=hash-link aria-label="Direct link to marginend" title="Direct link to marginend"></a></h3>
150<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>
151<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
152<hr>
153<h3 class="anchor anchorWithStickyNavbar_JmGV" id=marginhorizontal><code>marginHorizontal</code><a href=#marginhorizontal class=hash-link aria-label="Direct link to marginhorizontal" title="Direct link to marginhorizontal"></a></h3>
154<p>Setting <code>marginHorizontal</code> has the same effect as setting both <code>marginLeft</code> and <code>marginRight</code>.</p>
155<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
156<hr>
157<h3 class="anchor anchorWithStickyNavbar_JmGV" id=marginleft><code>marginLeft</code><a href=#marginleft class=hash-link aria-label="Direct link to marginleft" title="Direct link to marginleft"></a></h3>
158<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>
159<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
160<hr>
161<h3 class="anchor anchorWithStickyNavbar_JmGV" id=marginright><code>marginRight</code><a href=#marginright class=hash-link aria-label="Direct link to marginright" title="Direct link to marginright"></a></h3>
162<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>
163<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
164<hr>
165<h3 class="anchor anchorWithStickyNavbar_JmGV" id=marginstart><code>marginStart</code><a href=#marginstart class=hash-link aria-label="Direct link to marginstart" title="Direct link to marginstart"></a></h3>
166<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>
167<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
168<hr>
169<h3 class="anchor anchorWithStickyNavbar_JmGV" id=margintop><code>marginTop</code><a href=#margintop class=hash-link aria-label="Direct link to margintop" title="Direct link to margintop"></a></h3>
170<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>
171<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
172<hr>
173<h3 class="anchor anchorWithStickyNavbar_JmGV" id=marginvertical><code>marginVertical</code><a href=#marginvertical class=hash-link aria-label="Direct link to marginvertical" title="Direct link to marginvertical"></a></h3>
174<p>Setting <code>marginVertical</code> has the same effect as setting both <code>marginTop</code> and <code>marginBottom</code>.</p>
175<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
176<hr>
177<h3 class="anchor anchorWithStickyNavbar_JmGV" id=maxheight><code>maxHeight</code><a href=#maxheight class=hash-link aria-label="Direct link to maxheight" title="Direct link to maxheight"></a></h3>
178<p><code>maxHeight</code> is the maximum height for this component, in logical pixels.</p>
179<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>
180<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>
181<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
182<hr>
183<h3 class="anchor anchorWithStickyNavbar_JmGV" id=maxwidth><code>maxWidth</code><a href=#maxwidth class=hash-link aria-label="Direct link to maxwidth" title="Direct link to maxwidth"></a></h3>
184<p><code>maxWidth</code> is the maximum width for this component, in logical pixels.</p>
185<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>
186<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>
187<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
188<hr>
189<h3 class="anchor anchorWithStickyNavbar_JmGV" id=minheight><code>minHeight</code><a href=#minheight class=hash-link aria-label="Direct link to minheight" title="Direct link to minheight"></a></h3>
190<p><code>minHeight</code> is the minimum height for this component, in logical pixels.</p>
191<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>
192<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>
193<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
194<hr>
195<h3 class="anchor anchorWithStickyNavbar_JmGV" id=minwidth><code>minWidth</code><a href=#minwidth class=hash-link aria-label="Direct link to minwidth" title="Direct link to minwidth"></a></h3>
196<p><code>minWidth</code> is the minimum width for this component, in logical pixels.</p>
197<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>
198<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>
199<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
200<hr>
201<h3 class="anchor anchorWithStickyNavbar_JmGV" id=overflow><code>overflow</code><a href=#overflow class=hash-link aria-label="Direct link to overflow" title="Direct link to overflow"></a></h3>
202<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>
203<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('visible', 'hidden', 'scroll')<td>No</table>
204<hr>
205<h3 class="anchor anchorWithStickyNavbar_JmGV" id=padding><code>padding</code><a href=#padding class=hash-link aria-label="Direct link to padding" title="Direct link to padding"></a></h3>
206<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>
207<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
208<hr>
209<h3 class="anchor anchorWithStickyNavbar_JmGV" id=paddingbottom><code>paddingBottom</code><a href=#paddingbottom class=hash-link aria-label="Direct link to paddingbottom" title="Direct link to paddingbottom"></a></h3>
210<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>
211<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
212<hr>
213<h3 class="anchor anchorWithStickyNavbar_JmGV" id=paddingend><code>paddingEnd</code><a href=#paddingend class=hash-link aria-label="Direct link to paddingend" title="Direct link to paddingend"></a></h3>
214<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>
215<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
216<hr>
217<h3 class="anchor anchorWithStickyNavbar_JmGV" id=paddinghorizontal><code>paddingHorizontal</code><a href=#paddinghorizontal class=hash-link aria-label="Direct link to paddinghorizontal" title="Direct link to paddinghorizontal"></a></h3>
218<p>Setting <code>paddingHorizontal</code> is like setting both of <code>paddingLeft</code> and <code>paddingRight</code>.</p>
219<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
220<hr>
221<h3 class="anchor anchorWithStickyNavbar_JmGV" id=paddingleft><code>paddingLeft</code><a href=#paddingleft class=hash-link aria-label="Direct link to paddingleft" title="Direct link to paddingleft"></a></h3>
222<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>
223<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
224<hr>
225<h3 class="anchor anchorWithStickyNavbar_JmGV" id=paddingright><code>paddingRight</code><a href=#paddingright class=hash-link aria-label="Direct link to paddingright" title="Direct link to paddingright"></a></h3>
226<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>
227<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
228<hr>
229<h3 class="anchor anchorWithStickyNavbar_JmGV" id=paddingstart><code>paddingStart</code><a href=#paddingstart class=hash-link aria-label="Direct link to paddingstart" title="Direct link to paddingstart"></a></h3>
230<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>
231<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
232<hr>
233<h3 class="anchor anchorWithStickyNavbar_JmGV" id=paddingtop><code>paddingTop</code><a href=#paddingtop class=hash-link aria-label="Direct link to paddingtop" title="Direct link to paddingtop"></a></h3>
234<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>
235<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, ,string<td>No</table>
236<hr>
237<h3 class="anchor anchorWithStickyNavbar_JmGV" id=paddingvertical><code>paddingVertical</code><a href=#paddingvertical class=hash-link aria-label="Direct link to paddingvertical" title="Direct link to paddingvertical"></a></h3>
238<p>Setting <code>paddingVertical</code> is like setting both of <code>paddingTop</code> and <code>paddingBottom</code>.</p>
239<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
240<hr>
241<h3 class="anchor anchorWithStickyNavbar_JmGV" id=position><code>position</code><a href=#position class=hash-link aria-label="Direct link to position" title="Direct link to position"></a></h3>
242<p><code>position</code> in React Native is similar to <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/position target=_blank rel="noopener noreferrer">regular CSS</a>, but everything is set to <code>relative</code> by default.</p>
243<p><code>relative</code> will position an element according to the normal flow of the layout. Insets (<code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>) will offset relative to this layout.</p>
244<p><code>absolute</code> takes the element out of the normal flow of the layout. Insets will offset relative to its <a href=/docs/flexbox#the-containing-block>containing block</a>.</p>
245<p><code>static</code> will position an element according to the normal flow of the layout. Insets will have no effect.
246<code>static</code> elements do not form a containing block for absolute descendants.</p>
247<p>For more information, see the <a href=/docs/flexbox#position>Layout with Flexbox docs</a>. Also, <a href=https://www.yogalayout.dev/docs/styling/position target=_blank rel="noopener noreferrer">the Yoga documentation</a> has more details on how <code>position</code> differs between React Native and CSS.</p>
248<table><thead><tr><th>Type<th>Required<tbody><tr><td>enum('absolute', 'relative', 'static')<td>No</table>
249<hr>
250<h3 class="anchor anchorWithStickyNavbar_JmGV" id=right><code>right</code><a href=#right class=hash-link aria-label="Direct link to right" title="Direct link to right"></a></h3>
251<p><code>right</code> is the number of logical pixels to offset the right edge of this component.</p>
252<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>
253<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>
254<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
255<hr>
256<h3 class="anchor anchorWithStickyNavbar_JmGV" id=rowgap><code>rowGap</code><a href=#rowgap class=hash-link aria-label="Direct link to rowgap" title="Direct link to rowgap"></a></h3>
257<p><code>rowGap</code> works like <code>row-gap</code> in CSS. Only pixel units are supported in React Native. See <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap target=_blank rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap</a> for more details.</p>
258<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
259<hr>
260<h3 class="anchor anchorWithStickyNavbar_JmGV" id=start><code>start</code><a href=#start class=hash-link aria-label="Direct link to start" title="Direct link to start"></a></h3>
261<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>
262<p>This style takes precedence over the <code>left</code>, <code>right</code>, and <code>end</code> styles.</p>
263<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
264<hr>
265<h3 class="anchor anchorWithStickyNavbar_JmGV" id=top><code>top</code><a href=#top class=hash-link aria-label="Direct link to top" title="Direct link to top"></a></h3>
266<p><code>top</code> is the number of logical pixels to offset the top edge of this component.</p>
267<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>
268<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>
269<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
270<hr>
271<h3 class="anchor anchorWithStickyNavbar_JmGV" id=width><code>width</code><a href=#width class=hash-link aria-label="Direct link to width" title="Direct link to width"></a></h3>
272<p><code>width</code> sets the width of this component.</p>
273<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>
274<table><thead><tr><th>Type<th>Required<tbody><tr><td>number, string<td>No</table>
275<hr>
276<h3 class="anchor anchorWithStickyNavbar_JmGV" id=zindex><code>zIndex</code><a href=#zindex class=hash-link aria-label="Direct link to zindex" title="Direct link to zindex"></a></h3>
277<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>
278<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>
279<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>
280<table><thead><tr><th>Type<th>Required<tbody><tr><td>number<td>No</table>
281<hr></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/layout-props.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><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"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/layout-props.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><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"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-05-23T19:02:53.000Z itemprop=dateModified>May 23, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/image-style-props><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Image Style Props</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/shadow-props><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Shadow Props</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#example class="table-of-contents__link toc-highlight">Example</a><li><a href=#props class="table-of-contents__link toc-highlight">Props</a><ul><li><a href=#aligncontent class="table-of-contents__link toc-highlight"><code>alignContent</code></a><li><a href=#alignitems class="table-of-contents__link toc-highlight"><code>alignItems</code></a><li><a href=#alignself class="table-of-contents__link toc-highlight"><code>alignSelf</code></a><li><a href=#aspectratio class="table-of-contents__link toc-highlight"><code>aspectRatio</code></a><li><a href=#borderbottomwidth class="table-of-contents__link toc-highlight"><code>borderBottomWidth</code></a><li><a href=#borderendwidth class="table-of-contents__link toc-highlight"><code>borderEndWidth</code></a><li><a href=#borderleftwidth class="table-of-contents__link toc-highlight"><code>borderLeftWidth</code></a><li><a href=#borderrightwidth class="table-of-contents__link toc-highlight"><code>borderRightWidth</code></a><li><a href=#borderstartwidth class="table-of-contents__link toc-highlight"><code>borderStartWidth</code></a><li><a href=#bordertopwidth class="table-of-contents__link toc-highlight"><code>borderTopWidth</code></a><li><a href=#borderwidth class="table-of-contents__link toc-highlight"><code>borderWidth</code></a><li><a href=#bottom class="table-of-contents__link toc-highlight"><code>bottom</code></a><li><a href=#boxsizing class="table-of-contents__link toc-highlight"><code>boxSizing</code></a><li><a href=#columngap class="table-of-contents__link toc-highlight"><code>columnGap</code></a><li><a href=#direction class="table-of-contents__link toc-highlight"><code>direction</code></a><li><a href=#display class="table-of-contents__link toc-highlight"><code>display</code></a><li><a href=#end class="table-of-contents__link toc-highlight"><code>end</code></a><li><a href=#flex class="table-of-contents__link toc-highlight"><code>flex</code></a><li><a href=#flexbasis class="table-of-contents__link toc-highlight"><code>flexBasis</code></a><li><a href=#flexdirection class="table-of-contents__link toc-highlight"><code>flexDirection</code></a><li><a href=#flexgrow class="table-of-contents__link toc-highlight"><code>flexGrow</code></a><li><a href=#flexshrink class="table-of-contents__link toc-highlight"><code>flexShrink</code></a><li><a href=#flexwrap class="table-of-contents__link toc-highlight"><code>flexWrap</code></a><li><a href=#gap class="table-of-contents__link toc-highlight"><code>gap</code></a><li><a href=#height class="table-of-contents__link toc-highlight"><code>height</code></a><li><a href=#justifycontent class="table-of-contents__link toc-highlight"><code>justifyContent</code></a><li><a href=#left class="table-of-contents__link toc-highlight"><code>left</code></a><li><a href=#margin class="table-of-contents__link toc-highlight"><code>margin</code></a><li><a href=#marginbottom class="table-of-contents__link toc-highlight"><code>marginBottom</code></a><li><a href=#marginend class="table-of-contents__link toc-highlight"><code>marginEnd</code></a><li><a href=#marginhorizontal class="table-of-contents__link toc-highlight"><code>marginHorizontal</code></a><li><a href=#marginleft class="table-of-contents__link toc-highlight"><code>marginLeft</code></a><li><a href=#marginright class="table-of-contents__link toc-highlight"><code>marginRight</code></a><li><a href=#marginstart class="table-of-contents__link toc-highlight"><code>marginStart</code></a><li><a href=#margintop class="table-of-contents__link toc-highlight"><code>marginTop</code></a><li><a href=#marginvertical class="table-of-contents__link toc-highlight"><code>marginVertical</code></a><li><a href=#maxheight class="table-of-contents__link toc-highlight"><code>maxHeight</code></a><li><a href=#maxwidth class="table-of-contents__link toc-highlight"><code>maxWidth</code></a><li><a href=#minheight class="table-of-contents__link toc-highlight"><code>minHeight</code></a><li><a href=#minwidth class="table-of-contents__link toc-highlight"><code>minWidth</code></a><li><a href=#overflow class="table-of-contents__link toc-highlight"><code>overflow</code></a><li><a href=#padding class="table-of-contents__link toc-highlight"><code>padding</code></a><li><a href=#paddingbottom class="table-of-contents__link toc-highlight"><code>paddingBottom</code></a><li><a href=#paddingend class="table-of-contents__link toc-highlight"><code>paddingEnd</code></a><li><a href=#paddinghorizontal class="table-of-contents__link toc-highlight"><code>paddingHorizontal</code></a><li><a href=#paddingleft class="table-of-contents__link toc-highlight"><code>paddingLeft</code></a><li><a href=#paddingright class="table-of-contents__link toc-highlight"><code>paddingRight</code></a><li><a href=#paddingstart class="table-of-contents__link toc-highlight"><code>paddingStart</code></a><li><a href=#paddingtop class="table-of-contents__link toc-highlight"><code>paddingTop</code></a><li><a href=#paddingvertical class="table-of-contents__link toc-highlight"><code>paddingVertical</code></a><li><a href=#position class="table-of-contents__link toc-highlight"><code>position</code></a><li><a href=#right class="table-of-contents__link toc-highlight"><code>right</code></a><li><a href=#rowgap class="table-of-contents__link toc-highlight"><code>rowGap</code></a><li><a href=#start class="table-of-contents__link toc-highlight"><code>start</code></a><li><a href=#top class="table-of-contents__link toc-highlight"><code>top</code></a><li><a href=#width class="table-of-contents__link toc-highlight"><code>width</code></a><li><a href=#zindex class="table-of-contents__link toc-highlight"><code>zIndex</code></a></ul></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>