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-view-style-props" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>View Style 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/view-style-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="View Style Props · React Native"><meta data-rh=true name=description content=Example><meta data-rh=true property=og:description content=Example><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/view-style-props><link data-rh=true rel=alternate href=https://reactnative.dev/docs/view-style-props hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/view-style-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/view-style-props>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/view-style-props>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/view-style-props>0.79</a><li><a class=dropdown__link href=/docs/0.78/view-style-props>0.78</a><li><a class=dropdown__link href=/docs/0.77/view-style-props>0.77</a><li><a class=dropdown__link href=/docs/0.76/view-style-props>0.76</a><li><a class=dropdown__link href=/docs/0.75/view-style-props>0.75</a><li><a class=dropdown__link href=/docs/0.74/view-style-props>0.74</a><li><a class=dropdown__link href=/docs/0.73/view-style-props>0.73</a><li><a class=dropdown__link href=/docs/0.72/view-style-props>0.72</a><li><a class=dropdown__link href=/docs/0.71/view-style-props>0.71</a><li><a class=dropdown__link href=/docs/0.70/view-style-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 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 menu__link--active" aria-current=page 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>View Style Props</h1></header><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>
5<div class=snack-player data-snack-name=ViewStyleProps 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%20from%20'react'%3B%5Cnimport%20%7BView%2C%20StyleSheet%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(%5Cn%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.top%7D%20%2F%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.middle%7D%20%2F%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.bottom%7D%20%2F%3E%5Cn%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%3C%2FSafeAreaProvider%3E%5Cn)%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%20%20justifyContent%3A%20'space-between'%2C%5Cn%20%20%20%20padding%3A%2020%2C%5Cn%20%20%20%20margin%3A%2010%2C%5Cn%20%20%7D%2C%5Cn%20%20top%3A%20%7B%5Cn%20%20%20%20flex%3A%200.3%2C%5Cn%20%20%20%20backgroundColor%3A%20'grey'%2C%5Cn%20%20%20%20borderWidth%3A%205%2C%5Cn%20%20%20%20borderTopLeftRadius%3A%2020%2C%5Cn%20%20%20%20borderTopRightRadius%3A%2020%2C%5Cn%20%20%7D%2C%5Cn%20%20middle%3A%20%7B%5Cn%20%20%20%20flex%3A%200.3%2C%5Cn%20%20%20%20backgroundColor%3A%20'beige'%2C%5Cn%20%20%20%20borderWidth%3A%205%2C%5Cn%20%20%7D%2C%5Cn%20%20bottom%3A%20%7B%5Cn%20%20%20%20flex%3A%200.3%2C%5Cn%20%20%20%20backgroundColor%3A%20'pink'%2C%5Cn%20%20%20%20borderWidth%3A%205%2C%5Cn%20%20%20%20borderBottomLeftRadius%3A%2020%2C%5Cn%20%20%20%20borderBottomRightRadius%3A%2020%2C%5Cn%20%20%7D%2C%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>
6<h1>Reference</h1>
7<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>
8<h3 class="anchor anchorWithStickyNavbar_JmGV" id=backfacevisibility><code>backfaceVisibility</code><a href=#backfacevisibility class=hash-link aria-label="Direct link to backfacevisibility" title="Direct link to backfacevisibility"></a></h3>
9<table><thead><tr><th>Type<tbody><tr><td>enum(<code>'visible'</code>, <code>'hidden'</code>)</table>
10<hr>
11<h3 class="anchor anchorWithStickyNavbar_JmGV" id=backgroundcolor><code>backgroundColor</code><a href=#backgroundcolor class=hash-link aria-label="Direct link to backgroundcolor" title="Direct link to backgroundcolor"></a></h3>
12<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
13<hr>
14<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderbottomcolor><code>borderBottomColor</code><a href=#borderbottomcolor class=hash-link aria-label="Direct link to borderbottomcolor" title="Direct link to borderbottomcolor"></a></h3>
15<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
16<hr>
17<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderbottomendradius><code>borderBottomEndRadius</code><a href=#borderbottomendradius class=hash-link aria-label="Direct link to borderbottomendradius" title="Direct link to borderbottomendradius"></a></h3>
18<table><thead><tr><th>Type<tbody><tr><td>number</table>
19<hr>
20<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderbottomleftradius><code>borderBottomLeftRadius</code><a href=#borderbottomleftradius class=hash-link aria-label="Direct link to borderbottomleftradius" title="Direct link to borderbottomleftradius"></a></h3>
21<table><thead><tr><th>Type<tbody><tr><td>number</table>
22<hr>
23<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderbottomrightradius><code>borderBottomRightRadius</code><a href=#borderbottomrightradius class=hash-link aria-label="Direct link to borderbottomrightradius" title="Direct link to borderbottomrightradius"></a></h3>
24<table><thead><tr><th>Type<tbody><tr><td>number</table>
25<hr>
26<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderbottomstartradius><code>borderBottomStartRadius</code><a href=#borderbottomstartradius class=hash-link aria-label="Direct link to borderbottomstartradius" title="Direct link to borderbottomstartradius"></a></h3>
27<table><thead><tr><th>Type<tbody><tr><td>number</table>
28<hr>
29<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderstartendradius><code>borderStartEndRadius</code><a href=#borderstartendradius class=hash-link aria-label="Direct link to borderstartendradius" title="Direct link to borderstartendradius"></a></h3>
30<table><thead><tr><th>Type<tbody><tr><td>number</table>
31<hr>
32<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderstartstartradius><code>borderStartStartRadius</code><a href=#borderstartstartradius class=hash-link aria-label="Direct link to borderstartstartradius" title="Direct link to borderstartstartradius"></a></h3>
33<table><thead><tr><th>Type<tbody><tr><td>number</table>
34<hr>
35<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderendendradius><code>borderEndEndRadius</code><a href=#borderendendradius class=hash-link aria-label="Direct link to borderendendradius" title="Direct link to borderendendradius"></a></h3>
36<table><thead><tr><th>Type<tbody><tr><td>number</table>
37<hr>
38<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderendstartradius><code>borderEndStartRadius</code><a href=#borderendstartradius class=hash-link aria-label="Direct link to borderendstartradius" title="Direct link to borderendstartradius"></a></h3>
39<table><thead><tr><th>Type<tbody><tr><td>number</table>
40<hr>
41<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>
42<table><thead><tr><th>Type<tbody><tr><td>number</table>
43<hr>
44<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordercolor><code>borderColor</code><a href=#bordercolor class=hash-link aria-label="Direct link to bordercolor" title="Direct link to bordercolor"></a></h3>
45<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
46<hr>
47<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordercurve-ios><code>borderCurve</code> <div class="label ios">iOS</div><a href=#bordercurve-ios class=hash-link aria-label="Direct link to bordercurve-ios" title="Direct link to bordercurve-ios"></a></h3>
48<p>On iOS 13+, it is possible to change the corner curve of borders.</p>
49<table><thead><tr><th>Type<tbody><tr><td>enum(<code>'circular'</code>, <code>'continuous'</code>)</table>
50<hr>
51<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderendcolor><code>borderEndColor</code><a href=#borderendcolor class=hash-link aria-label="Direct link to borderendcolor" title="Direct link to borderendcolor"></a></h3>
52<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
53<hr>
54<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderleftcolor><code>borderLeftColor</code><a href=#borderleftcolor class=hash-link aria-label="Direct link to borderleftcolor" title="Direct link to borderleftcolor"></a></h3>
55<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
56<hr>
57<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>
58<table><thead><tr><th>Type<tbody><tr><td>number</table>
59<hr>
60<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderradius><code>borderRadius</code><a href=#borderradius class=hash-link aria-label="Direct link to borderradius" title="Direct link to borderradius"></a></h3>
61<p>If the rounded border is not visible, try applying <code>overflow: 'hidden'</code> as well.</p>
62<table><thead><tr><th>Type<tbody><tr><td>number</table>
63<hr>
64<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderrightcolor><code>borderRightColor</code><a href=#borderrightcolor class=hash-link aria-label="Direct link to borderrightcolor" title="Direct link to borderrightcolor"></a></h3>
65<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
66<hr>
67<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>
68<table><thead><tr><th>Type<tbody><tr><td>number</table>
69<hr>
70<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderstartcolor><code>borderStartColor</code><a href=#borderstartcolor class=hash-link aria-label="Direct link to borderstartcolor" title="Direct link to borderstartcolor"></a></h3>
71<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
72<hr>
73<h3 class="anchor anchorWithStickyNavbar_JmGV" id=borderstyle><code>borderStyle</code><a href=#borderstyle class=hash-link aria-label="Direct link to borderstyle" title="Direct link to borderstyle"></a></h3>
74<table><thead><tr><th>Type<tbody><tr><td>enum(<code>'solid'</code>, <code>'dotted'</code>, <code>'dashed'</code>)</table>
75<hr>
76<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordertopcolor><code>borderTopColor</code><a href=#bordertopcolor class=hash-link aria-label="Direct link to bordertopcolor" title="Direct link to bordertopcolor"></a></h3>
77<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
78<hr>
79<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordertopendradius><code>borderTopEndRadius</code><a href=#bordertopendradius class=hash-link aria-label="Direct link to bordertopendradius" title="Direct link to bordertopendradius"></a></h3>
80<table><thead><tr><th>Type<tbody><tr><td>number</table>
81<hr>
82<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordertopleftradius><code>borderTopLeftRadius</code><a href=#bordertopleftradius class=hash-link aria-label="Direct link to bordertopleftradius" title="Direct link to bordertopleftradius"></a></h3>
83<table><thead><tr><th>Type<tbody><tr><td>number</table>
84<hr>
85<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordertoprightradius><code>borderTopRightRadius</code><a href=#bordertoprightradius class=hash-link aria-label="Direct link to bordertoprightradius" title="Direct link to bordertoprightradius"></a></h3>
86<table><thead><tr><th>Type<tbody><tr><td>number</table>
87<hr>
88<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bordertopstartradius><code>borderTopStartRadius</code><a href=#bordertopstartradius class=hash-link aria-label="Direct link to bordertopstartradius" title="Direct link to bordertopstartradius"></a></h3>
89<table><thead><tr><th>Type<tbody><tr><td>number</table>
90<hr>
91<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>
92<table><thead><tr><th>Type<tbody><tr><td>number</table>
93<hr>
94<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>
95<table><thead><tr><th>Type<tbody><tr><td>number</table>
96<h3 class="anchor anchorWithStickyNavbar_JmGV" id=boxshadow><code>boxShadow</code><a href=#boxshadow class=hash-link aria-label="Direct link to boxshadow" title="Direct link to boxshadow"></a></h3>
97<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p><code>boxShadow</code> is only available on the <a href=/architecture/landing-page>New Architecture</a>. Outset shadows are only supported on <strong>Android 9+</strong>. Inset shadows are only supported on <strong>Android 10+</strong>.</div></div>
98<p>Adds a shadow effect to an element, with the ability to control the position, color, size, and blurriness of the shadow. This shadow either appears around the outside or inside of the border box of the element, depending on whether or not the shadow is <em>inset</em>. This is a spec-compliant implementation of the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow target=_blank rel="noopener noreferrer">web style prop of the same name</a>. Read more about all the arguments available in the <a href=/docs/boxshadowvalue>BoxShadowValue</a> documentation.</p>
99<p>These shadows can be composed together so that a single <code>boxShadow</code> can be comprised of multiple different shadows.</p>
100<p><code>boxShadow</code> takes either a string which mimics the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#syntax target=_blank rel="noopener noreferrer">web syntax</a> or an array of <a href=/docs/boxshadowvalue>BoxShadowValue</a> objects.</p>
101<table><thead><tr><th>Type<tbody><tr><td>array of BoxShadowValue ojects | string</table>
102<h3 class="anchor anchorWithStickyNavbar_JmGV" id=cursor-ios><code>cursor</code> <div class="label ios">iOS</div><a href=#cursor-ios class=hash-link aria-label="Direct link to cursor-ios" title="Direct link to cursor-ios"></a></h3>
103<p>On iOS 17+, Setting to <code>pointer</code> allows hover effects when a pointer (such as a trackpad or stylus on iOS, or the users' gaze on visionOS) is over the view.</p>
104<table><thead><tr><th>Type<tbody><tr><td>enum(<code>'auto'</code>, <code>'pointer'</code>)</table>
105<hr>
106<h3 class="anchor anchorWithStickyNavbar_JmGV" id=elevation-android><code>elevation</code> <div class="label android">Android</div><a href=#elevation-android class=hash-link aria-label="Direct link to elevation-android" title="Direct link to elevation-android"></a></h3>
107<p>Sets the elevation of a view, using Android's underlying <a href=https://developer.android.com/training/material/shadows-clipping.html#Elevation target=_blank rel="noopener noreferrer">elevation API</a>. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.</p>
108<table><thead><tr><th>Type<tbody><tr><td>number</table>
109<hr>
110<h3 class="anchor anchorWithStickyNavbar_JmGV" id=filter><code>filter</code><a href=#filter class=hash-link aria-label="Direct link to filter" title="Direct link to filter"></a></h3>
111<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p><code>filter</code> is only available on the <a href=/architecture/landing-page>New Architecture</a></div></div>
112<p>Adds a graphical filter to the <code>View</code>. This filter is comprised of any number of <em>filter functions</em>, which each represent some atomic change to the graphical composition of the <code>View</code>. The complete list of valid filter functions is defined below. <code>filter</code> will apply to descendants of the <code>View</code> as well as the <code>View</code> itself. <code>filter</code> implies <code>overflow: hidden</code>, so descendants will be clipped to fit the bounds of the <code>View</code>.</p>
113<p>The following filter functions work across all platforms:</p>
114<ul>
115<li><code>brightness</code>: Changes the brightness of the <code>View</code>. Takes a non-negative number or percentage.</li>
116<li><code>opacity</code>: Changes the opacity, or alpha, of the <code>View</code>. Takes a non-negative number or percentage.</li>
117</ul>
118<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p>Due to issues with performance and spec compliance, these are the only two filter functions available on iOS. There are plans to explore some potential workarounds using SwiftUI instead of UIKit for this implementation.</div></div>
119<div class="label basic android">Android</div>
120<p>The following filter functions work on Android only:</p>
121<ul>
122<li><code>blur</code>: Blurs the <code>View</code> with a <a href=https://en.wikipedia.org/wiki/Gaussian_blur target=_blank rel="noopener noreferrer">Guassian blur</a>, where the specified length represents the radius used in the blurring algorithm. Any non-negative DIP value is valid (no percents). The larger the value, the blurrier the result.</li>
123<li><code>contrast</code>: Changes the contrast of the <code>View</code>. Takes a non-negative number or percentage.</li>
124<li><code>dropShadow</code>: Adds a shadow around the alpha mask of the <code>View</code> (only non-zero alpha pixels in the <code>View</code> will cast a shadow). Takes an optional color representing the shadow color, and 2 or 3 lengths. If 2 lengths are specified they are interperted as <code>offsetX</code> and <code>offsetY</code> which will translate the shadow in the X and Y dimensions respectfully. If a 3rd length is given it is interpreted as the standard deviation of the Guassian blur used on the shadow - so a larger value will blur the shadow more. Read more about the arguments in <a href=/docs/dropshadowvalue>DropShadowValue</a>.</li>
125<li><code>grayscale</code>: Converts the <code>View</code> to <a href=https://en.wikipedia.org/wiki/Grayscale target=_blank rel="noopener noreferrer">grayscale</a> by the specified amount. Takes a non-negative number or percentage, where <code>1</code> or <code>100%</code> represents complete grayscale.</li>
126<li><code>hueRotate</code>: Changes the <a href=https://en.wikipedia.org/wiki/Hue target=_blank rel="noopener noreferrer">hue</a> of the View. The argument of this function defines the angle of a color wheel around which the hue will be rotated, so e.g., <code>360deg</code> would have no effect. This angle can have either <code>deg</code> or <code>rad</code> units.</li>
127<li><code>invert</code>: Inverts the colors in the <code>View</code>. Takes a non-negative number or percentage, where <code>1</code> or <code>100%</code> represents complete inversion.</li>
128<li><code>sepia</code>: Converts the <code>View</code> to <a href=https://en.wikipedia.org/wiki/Sepia_(color) target=_blank rel="noopener noreferrer">sepia</a>. Takes a non-negative number or percentage, where <code>1</code> or <code>100%</code> represents complete sepia.</li>
129<li><code>saturate</code>: Changes the <a href=https://en.wikipedia.org/wiki/Colorfulness target=_blank rel="noopener noreferrer">saturation</a> of the <code>View</code>. Takes a non-negative number or percentage.</li>
130</ul>
131<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p><code>blur</code> and <code>dropShadow</code> are only supported on <strong>Android 12+</strong></div></div>
132<p><code>filter</code> takes either an array of objects comprising of the above filter functions or a string which mimics the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/filter#syntax target=_blank rel="noopener noreferrer">web syntax</a>.</p>
133<table><thead><tr><th>Type<tbody><tr><td>array of objects: <code>{brightness: number|string}</code>, <code>{opacity: number|string}</code>, <code>{blur: number|string}</code>, <code>{contrast: number|string}</code>, <code>{dropShadow: DropShadowValue|string}</code>, <code>{grayscale: number|string}</code>, <code>{hueRotate: number|string}</code>, <code>{invert: number|string}</code>, <code>{sepia: number|string}</code>, <code>{saturate: number|string}</code> or string</table>
134<hr>
135<h3 class="anchor anchorWithStickyNavbar_JmGV" id=opacity><code>opacity</code><a href=#opacity class=hash-link aria-label="Direct link to opacity" title="Direct link to opacity"></a></h3>
136<table><thead><tr><th>Type<tbody><tr><td>number</table>
137<hr>
138<h3 class="anchor anchorWithStickyNavbar_JmGV" id=outlinecolor><code>outlineColor</code><a href=#outlinecolor class=hash-link aria-label="Direct link to outlinecolor" title="Direct link to outlinecolor"></a></h3>
139<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p><code>outlineColor</code> is only available on the <a href=/architecture/landing-page>New Architecture</a></div></div>
140<p>Sets the color of an element's outline. See <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color target=_blank rel="noopener noreferrer">web documentation</a> for more details.</p>
141<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table>
142<hr>
143<h3 class="anchor anchorWithStickyNavbar_JmGV" id=outlineoffset><code>outlineOffset</code><a href=#outlineoffset class=hash-link aria-label="Direct link to outlineoffset" title="Direct link to outlineoffset"></a></h3>
144<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p><code>outlineOffset</code> is only available on the <a href=/architecture/landing-page>New Architecture</a></div></div>
145<p>Sets the amount of space between an outline and the bounds of an element. Does not affect layout. See <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset target=_blank rel="noopener noreferrer">web documentation</a> for more details.</p>
146<table><thead><tr><th>Type<tbody><tr><td>number</table>
147<hr>
148<h3 class="anchor anchorWithStickyNavbar_JmGV" id=outlinestyle><code>outlineStyle</code><a href=#outlinestyle class=hash-link aria-label="Direct link to outlinestyle" title="Direct link to outlinestyle"></a></h3>
149<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p><code>outlineStyle</code> is only available on the <a href=/architecture/landing-page>New Architecture</a></div></div>
150<p>Sets the style of an element's outline. See <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style target=_blank rel="noopener noreferrer">web documentation</a> for more details.</p>
151<table><thead><tr><th>Type<tbody><tr><td>enum(<code>'solid'</code>, <code>'dotted'</code>, <code>'dashed'</code>)</table>
152<hr>
153<h3 class="anchor anchorWithStickyNavbar_JmGV" id=outlinewidth><code>outlineWidth</code><a href=#outlinewidth class=hash-link aria-label="Direct link to outlinewidth" title="Direct link to outlinewidth"></a></h3>
154<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p><code>outlineWidth</code> is only available on the <a href=/architecture/landing-page>New Architecture</a></div></div>
155<p>The width of an outline which is drawn around an element, outside the border. Does not affect layout. See <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width target=_blank rel="noopener noreferrer">web documentation</a> for more details.</p>
156<table><thead><tr><th>Type<tbody><tr><td>number</table>
157<hr>
158<h3 class="anchor anchorWithStickyNavbar_JmGV" id=pointerevents><code>pointerEvents</code><a href=#pointerevents class=hash-link aria-label="Direct link to pointerevents" title="Direct link to pointerevents"></a></h3>
159<p>Controls whether the <code>View</code> can be the target of touch events.</p>
160<ul>
161<li><code>'auto'</code>: The View can be the target of touch events.</li>
162<li><code>'none'</code>: The View is never the target of touch events.</li>
163<li><code>'box-none'</code>: The View is never the target of touch events but its subviews can be.</li>
164<li><code>'box-only'</code>: The view can be the target of touch events but its subviews cannot be.</li>
165</ul>
166<table><thead><tr><th>Type<tbody><tr><td>enum(<code>'auto'</code>, <code>'box-none'</code>, <code>'box-only'</code>, <code>'none'</code> )</table></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/view-style-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/view-style-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-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 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/text-style-props><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Text Style Props</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/boxshadowvalue><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>BoxShadowValue Object Type</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=#backfacevisibility class="table-of-contents__link toc-highlight"><code>backfaceVisibility</code></a><li><a href=#backgroundcolor class="table-of-contents__link toc-highlight"><code>backgroundColor</code></a><li><a href=#borderbottomcolor class="table-of-contents__link toc-highlight"><code>borderBottomColor</code></a><li><a href=#borderbottomendradius class="table-of-contents__link toc-highlight"><code>borderBottomEndRadius</code></a><li><a href=#borderbottomleftradius class="table-of-contents__link toc-highlight"><code>borderBottomLeftRadius</code></a><li><a href=#borderbottomrightradius class="table-of-contents__link toc-highlight"><code>borderBottomRightRadius</code></a><li><a href=#borderbottomstartradius class="table-of-contents__link toc-highlight"><code>borderBottomStartRadius</code></a><li><a href=#borderstartendradius class="table-of-contents__link toc-highlight"><code>borderStartEndRadius</code></a><li><a href=#borderstartstartradius class="table-of-contents__link toc-highlight"><code>borderStartStartRadius</code></a><li><a href=#borderendendradius class="table-of-contents__link toc-highlight"><code>borderEndEndRadius</code></a><li><a href=#borderendstartradius class="table-of-contents__link toc-highlight"><code>borderEndStartRadius</code></a><li><a href=#borderbottomwidth class="table-of-contents__link toc-highlight"><code>borderBottomWidth</code></a><li><a href=#bordercolor class="table-of-contents__link toc-highlight"><code>borderColor</code></a><li><a href=#bordercurve-ios class="table-of-contents__link toc-highlight"><code>borderCurve</code> <div class="label ios">iOS</div></a><li><a href=#borderendcolor class="table-of-contents__link toc-highlight"><code>borderEndColor</code></a><li><a href=#borderleftcolor class="table-of-contents__link toc-highlight"><code>borderLeftColor</code></a><li><a href=#borderleftwidth class="table-of-contents__link toc-highlight"><code>borderLeftWidth</code></a><li><a href=#borderradius class="table-of-contents__link toc-highlight"><code>borderRadius</code></a><li><a href=#borderrightcolor class="table-of-contents__link toc-highlight"><code>borderRightColor</code></a><li><a href=#borderrightwidth class="table-of-contents__link toc-highlight"><code>borderRightWidth</code></a><li><a href=#borderstartcolor class="table-of-contents__link toc-highlight"><code>borderStartColor</code></a><li><a href=#borderstyle class="table-of-contents__link toc-highlight"><code>borderStyle</code></a><li><a href=#bordertopcolor class="table-of-contents__link toc-highlight"><code>borderTopColor</code></a><li><a href=#bordertopendradius class="table-of-contents__link toc-highlight"><code>borderTopEndRadius</code></a><li><a href=#bordertopleftradius class="table-of-contents__link toc-highlight"><code>borderTopLeftRadius</code></a><li><a href=#bordertoprightradius class="table-of-contents__link toc-highlight"><code>borderTopRightRadius</code></a><li><a href=#bordertopstartradius class="table-of-contents__link toc-highlight"><code>borderTopStartRadius</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=#boxshadow class="table-of-contents__link toc-highlight"><code>boxShadow</code></a><li><a href=#cursor-ios class="table-of-contents__link toc-highlight"><code>cursor</code> <div class="label ios">iOS</div></a><li><a href=#elevation-android class="table-of-contents__link toc-highlight"><code>elevation</code> <div class="label android">Android</div></a><li><a href=#filter class="table-of-contents__link toc-highlight"><code>filter</code></a><li><a href=#opacity class="table-of-contents__link toc-highlight"><code>opacity</code></a><li><a href=#outlinecolor class="table-of-contents__link toc-highlight"><code>outlineColor</code></a><li><a href=#outlineoffset class="table-of-contents__link toc-highlight"><code>outlineOffset</code></a><li><a href=#outlinestyle class="table-of-contents__link toc-highlight"><code>outlineStyle</code></a><li><a href=#outlinewidth class="table-of-contents__link toc-highlight"><code>outlineWidth</code></a><li><a href=#pointerevents class="table-of-contents__link toc-highlight"><code>pointerEvents</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>