mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-17 12:34:48 +00:00
Nicolas Gallagher
3 lines
62 KiB
HTML
3 lines
62 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Styling // React Native for Web</title><meta property="og:title" content="Styling // React Native for Web"><meta name="description" content=""><link rel="icon" href="/react-native-web/static/logo.svg"><style>:root{--docs-spacing-1:0.25rem;--docs-spacing-2:0.5rem;--docs-spacing-3:0.75rem;--docs-spacing-4:1rem;--docs-spacing-5:1.25rem;--docs-spacing-6:1.5rem;--docs-spacing-8:2rem;--docs-spacing-10:2.5rem;--docs-spacing-12:3rem;--docs-spacing-16:4rem;--docs-spacing-20:5rem;--docs-spacing-40:10rem;--docs-spacing-60:15rem;--docs-spacing-64:16rem;--docs-spacing-72:18rem;--docs-spacing-80:20rem;--docs-font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;--docs-font-size:14px;--docs-heading-size:2em;--docs-line-height:1.5;--docs-ring-inset:var(--tw-empty,/*!*/ /*!*/);--docs-ring-offset-width:0px}@media (min-width:1088px){:root{--docs-font-size:16px;--docs-heading-size:2.25em}}@media all{:root{--docs-bg-color:#fff;--docs-border-color:#e5e5e5;--docs-border-color-faint:#e5e5e5;--docs-text-color:#333;--docs-text-color-faint:#6b7280;--docs-heading-color:#111;--docs-link-color:#1977f2;--docs-code-color:#111;--docs-callout-bg-color:#fff3cd;--docs-callout-border-color:#ffd402;--docs-theme-color:#1977f2;--docs-theme-color-faint:#1977f250;--docs-theme-color-faded:#1977f20f;--docs-ring-color:rgba(59, 130, 246, 0.5);--docs-ring-offset-color:#fff;--docs-ring-offset-shadow:0 0 #0000;--docs-ring-shadow:0 0 #0000;--docs-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}}@media (prefers-color-scheme:dark){:root{--docs-bg-color:#15202b;--docs-border-color:#26395a;--docs-border-color-faint:#26395a;--docs-text-color:#eee;--docs-text-color-faint:#aaa;--docs-heading-color:#fff;--docs-link-color:#60a6ff;--docs-code-color:#fff;--docs-callout-bg-color:#231f00;--docs-ring-color:rgba(59, 130, 246, 0.5);--docs-ring-offset-color:#fff;--docs-ring-offset-shadow:0 0 #0000;--docs-ring-shadow:0 0 #0000;--docs-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}}html{font:var(--docs-font-size)/var(--docs-line-height) var(--docs-font-family)}body{background-color:var(--docs-bg-color, transparent);color:var(--docs-text-color, #333);margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}hr{box-sizing:content-box;height:0}img{border-style:none}iframe,img,svg,video{display:block}img,video{max-width:100%;height:auto}svg:not(:root){overflow:hidden}table{border-collapse:collapse}:not(:focus-visible){outline-width:0}.markdown a,a{color:var(--docs-link-color);text-decoration:underline}h1,h2,h3,h4,h5,h6{color:var(--docs-heading-color)}.text,.view{background-color:transparent;border:0 solid #000;box-sizing:border-box;margin:0;padding:0;text-decoration:none}.text{color:var(--docs-text-color);display:inline;font-family:var(--docs-font-family);white-space:pre-wrap;word-wrap:break-word}.view{align-items:stretch;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;min-height:0;min-width:0;position:relative;z-index:0}.emoji{height:1.2em;margin:0 .075em!important;display:inline-block}.container{max-width:760px}.navigation{left:auto;right:100%}.before-middot::before{display:inline-block;content:"";width:3px;height:3px;background-color:currentColor;border-radius:9999px;margin:0 7px 0-10px;vertical-align:middle}.prop{margin-top:var(--docs-spacing-5);margin-bottom:var(--docs-spacing-5)}.prop p{margin:0!important}.callout{background-color:var(--docs-callout-bg-color);border-bottom-right-radius:.5rem;border-top-right-radius:.5rem;border-left:3px solid var(--docs-callout-border-color);margin:var(--docs-spacing-12)0 var(--docs-spacing-4);padding:var(--docs-spacing-2) var(--docs-spacing-8)}.markdown{line-height:1.75;font-size:1.125rem;word-wrap:break-word}.markdown h1{font-weight:800;font-size:var(--docs-heading-size);margin:0 0 var(--docs-spacing-8);line-height:1.1}.markdown h2{font-weight:700;font-size:1.5em;margin:var(--docs-spacing-12)0 var(--docs-spacing-6);line-height:1.3}.markdown h2+*,.markdown hr+*{margin-top:0}.markdown h3{font-weight:600;margin:var(--docs-spacing-8)0 var(--docs-spacing-3)}.markdown h2,.markdown h3,.markdown h4{scroll-margin-top:1em}.markdown h1:hover .header-anchor,.markdown h2:hover .header-anchor,.markdown h3:hover .header-anchor{opacity:1}.markdown .header-anchor{text-decoration:none}.markdown .lead,.markdown h3{font-size:1.25em;line-height:1.5}.markdown hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid var(--docs-border-color-faint);margin:var(--docs-spacing-12)0}.markdown table{border-collapse:collapse;text-indent:0;border-color:inherit;width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7}.markdown thead{font-weight:600;border-bottom:1px solid var(--docs-border-color)}.markdown thead th{vertical-align:bottom;padding:0 .5em .5em}.markdown tbody td:first-child,.markdown thead th:first-child{padding-left:0}.markdown tbody tr{border-bottom:1px solid var(--docs-border-color-faint)}.markdown tbody td{vertical-align:top;padding:.5em}.markdown code{color:var(--docs-code-color);font-weight:600;font-size:.875em}.markdown p,.markdown ul{margin:1.25em 0}.markdown ol{padding:0;margin:1.25em 0 1.25em 1em}.markdown ul{padding:0;list-style:none}.markdown li{margin:.5em 0}.markdown ul>li{position:relative;padding-left:1.75em}.markdown ul>li::before{content:"";position:absolute;background-color:currentColor;border-radius:50%;width:.375em;height:.375em;top:calc(.875em - .1875em);left:.25em}.markdown pre{max-width:100%;color:#000;tab-size:2;overflow-x:auto;font-size:1em;line-height:1.7;margin:1.5em 0;border-radius:.375rem;padding:.85em 1.15em}.markdown blockquote{font-weight:500;font-style:italic;border-left-width:.25rem;border-left-color:#e5e7eb;quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.border{border-width:1px;border-style:solid}.border-none{border:0}.border-top{border-top-width:1px;border-top-style:solid}.border-right{border-right-width:1px;border-right-style:solid}.border-left{border-left-width:1px;border-left-style:solid}.border-bottom{border-bottom-width:1px;border-bottom-style:solid}.border-left-3{border-width:3px}.block{display:block}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.flex{display:flex}.rounded{border-radius:var(--docs-spacing-1, 0.25rem)}.rounded-full{border-radius:9999px}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-center{justify-content:center}.font-bold{font-weight:700}.font-normal{font-weight:400}.font-mono{font-family:monospace,monospace;font-size:1em}.font-semibold{font-weight:600}.h-12{height:var(--docs-spacing-12)}.h-full{height:100%}.h-screen{height:100vh}.list-none{list-style:none}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:var(--docs-spacing-2);margin-bottom:var(--docs-spacing-2)}.my-8{margin-top:var(--docs-spacing-8);margin-bottom:var(--docs-spacing-8)}.ml-2{margin-left:var(--docs-spacing-2)}.mt-2{margin-top:var(--docs-spacing-2)}.mt-4{margin-top:var(--docs-spacing-4)}.mt-6{margin-top:var(--docs-spacing-6)}.mt-12{margin-top:var(--docs-spacing-12)}.mr-2{margin-right:var(--docs-spacing-2)}.mr-4{margin-right:var(--docs-spacing-4)}.mb-2{margin-bottom:var(--docs-spacing-2)}.mb-4{margin-bottom:var(--docs-spacing-4)}.mb-8{margin-bottom:var(--docs-spacing-8)}.opacity-0{opacity:0}.opacity-50{opacity:.5}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.p-6{padding:var(--docs-spacing-6)}.px-1{padding-left:var(--docs-spacing-1);padding-right:var(--docs-spacing-1)}.px-3{padding-left:var(--docs-spacing-3);padding-right:var(--docs-spacing-3)}.px-4{padding-left:var(--docs-spacing-4);padding-right:var(--docs-spacing-4)}.px-6{padding-left:var(--docs-spacing-6);padding-right:var(--docs-spacing-6)}.py-1{padding-top:var(--docs-spacing-1);padding-bottom:var(--docs-spacing-1)}.py-2{padding-top:var(--docs-spacing-2);padding-bottom:var(--docs-spacing-2)}.py-3{padding-top:var(--docs-spacing-3);padding-bottom:var(--docs-spacing-3)}.py-4{padding-top:var(--docs-spacing-4);padding-bottom:var(--docs-spacing-4)}.pl-5{padding-left:var(--docs-spacing-5)}.pt-1{padding-top:var(--docs-spacing-1)}.pt-8{padding-top:var(--docs-spacing-8)}.pt-12{padding-top:var(--docs-spacing-12)}.pb-1{padding-bottom:var(--docs-spacing-1)}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.fixed{position:fixed}.overflow-ellipsis{overflow:hidden;text-overflow:ellipsis}.text-uppercase{text-transform:uppercase}.text-sm,.text-xl{font-size:.875rem;line-height:1.25}.text-xl{font-size:1.25rem}.text-2xl,.text-3xl{font-size:2rem;line-height:1.25}.text-3xl{font-size:3rem}.w-auto{width:auto}.w-40{width:var(--docs-spacing-40)}.w-72{width:var(--docs-spacing-72)}.w-full{width:100%}.whitespace-nowrap{white-space:nowrap}.z-10{z-index:10}.z-20{z-index:20}.fill-current{fill:currentColor}.inset-y-0{top:0;bottom:0}.no-underline{text-decoration:none}.ring-opacity-50{--docs-ring-opacity:0.5}.bg-theme{background-color:var(--docs-bg-color)}.border-color-faint{border-color:var(--docs-border-color-faint)}.border-theme-faint{border-color:var(--docs-theme-color-faint)}.text-color{color:var(--docs-text-color)}.text-color-faint{color:var(--docs-text-color-faint)}.text-white{--docs-text-opacity:1;color:rgba(255,255,255,var(--docs-text-opacity))}.hover\:opacity-100:hover{opacity:1}.hover\:text-color-inherit:hover{color:inherit}@media (min-width:1088px){.container{max-width:1400px}.navigation{right:auto}.wide\:block{display:block}.wide\:flex{display:flex}.wide\:hidden{display:none}.wide\:flex-row{flex-direction:row}.wide\:sticky{position:sticky}.wide\:opacity-0{opacity:0}.wide\:opacity-1{opacity:1}.wide\:left-0{left:0}.wide\:right-0{right:0}.wide\:top-16{top:var(--docs-spacing-16)}.wide\:px-20{padding-left:var(--docs-spacing-20);padding-right:var(--docs-spacing-20)}.wide\:px-40{padding-left:var(--docs-spacing-40);padding-right:var(--docs-spacing-40)}}</style><link rel="stylesheet" media="(prefers-color-scheme:light)" href="https://unpkg.com/prismjs@1.20.0/themes/prism.css"><link rel="stylesheet" media="(prefers-color-scheme:dark)" href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css"><script defer="defer">function setupNavigationDrawer(){const t=document.getElementById("navigation"),n=document.getElementById("close-nav"),e=document.getElementById("show-nav");let o=!1;function i(){t.classList.add("opacity-0"),n.classList.add("hidden"),t.style.right=null,e.classList.remove("hidden"),o=!1}null!=n&&null!=e&&null!=t&&(e.addEventListener("click",function(){t.classList.remove("opacity-0"),t.style.right="auto",e.classList.add("hidden"),n.classList.remove("hidden"),o=!0}),document.addEventListener("click",n=>{!o||t.contains(n.target)||e.contains(n.target)||i()}),document.addEventListener("keydown",t=>{o&&"Escape"===t.key&&i()}))}function setupNavigationScroll(){const t=document.getElementById("navigation-scroller");if(null==t)return;window.addEventListener("unload",function(){const n=t.scrollTop;localStorage.setItem("navScrollPosition",n)});const n=localStorage.getItem("navScrollPosition");null!=n&&(t.scrollTop=n)}document.addEventListener("DOMContentLoaded",function(){setupNavigationDrawer(),setupNavigationScroll()});</script></head><body><div id="app" class="container mx-auto"><div class="view"><div class="view fixed wide:hidden z-20" style="right:30px; bottom:30px;"><button id="show-nav" aria-label="Show navigation" class="view appearance-none rounded-full items-center justify-center text-white cursor-pointer" style="background-color:var(--docs-theme-color); width:4rem; height:4rem; padding:5px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" fill="currentColor" class="w-full fill-current"><path d="M367.6 192.9c-3.8-1.3-7.7-2.5-11.7-3.7.7-2.7 1.3-5.4 1.8-8 8.9-43.2 3.1-78-16.8-89.4-19-11-50.2.5-81.6 27.8-3 2.6-6.1 5.4-9.1 8.3-2-1.9-4-3.8-6-5.6-33-29.3-66-41.6-85.8-30.1-19 11-24.7 43.7-16.7 84.6.8 4 1.7 8 2.7 12.1-4.7 1.3-9.2 2.7-13.5 4.2-38.6 13.5-63.3 34.6-63.3 56.5 0 22.6 26.5 45.3 66.7 59.1 3.2 1.1 6.5 2.1 9.9 3.1-1.1 4.4-2.1 8.8-2.9 13-7.6 40.2-1.7 72.1 17.3 83.1 19.6 11.3 52.5-.3 84.5-28.3 2.5-2.2 5.1-4.6 7.6-7 3.3 3.2 6.6 6.2 9.9 9 31 26.7 61.7 37.5 80.6 26.5 19.6-11.3 25.9-45.6 17.7-87.4-.6-3.2-1.4-6.4-2.2-9.8 2.3-.7 4.6-1.4 6.8-2.1 41.8-13.9 69.1-36.3 69.1-59.2-.1-21.9-25.6-43.1-65-56.7zm-9.1 101.2c-2 .7-4 1.3-6.1 1.9-4.6-14.6-10.9-30.2-18.5-46.2 7.3-15.7 13.3-31 17.8-45.6 3.7 1.1 7.4 2.2 10.9 3.4 33.8 11.6 54.4 28.8 54.4 42.1-.1 14.1-22.3 32.4-58.5 44.4zm-15 29.7c3.7 18.5 4.2 35.1 1.8 48.2-2.2 11.7-6.5 19.5-12 22.7-11.5 6.7-36.1-2-62.6-24.8-3-2.6-6.1-5.4-9.2-8.4 10.3-11.2 20.6-24.3 30.6-38.8 17.6-1.6 34.3-4.1 49.4-7.6.8 2.9 1.5 5.8 2 8.7zm-151.6 69.7c-11.2 4-20.2 4.1-25.6 1-11.5-6.6-16.3-32.3-9.8-66.7.7-3.9 1.6-8 2.7-12.1 15 3.3 31.5 5.7 49.2 7.1 10.1 14.2 20.7 27.3 31.3 38.7-2.3 2.2-4.6 4.4-7 6.4-14.1 12.4-28.3 21.2-40.8 25.6zM139.3 294c-17.8-6.1-32.5-14-42.6-22.6-9.1-7.8-13.6-15.4-13.6-21.7 0-13.3 19.8-30.2 52.9-41.8 4-1.4 8.2-2.7 12.6-4 4.6 14.9 10.6 30.4 17.8 46.1-7.3 15.9-13.4 31.7-18 46.8-3.2-.9-6.2-1.8-9.1-2.8zm17.6-120.1c-6.9-35.1-2.3-61.5 9.2-68.1 12.2-7.1 39.2 3 67.7 28.3 1.8 1.6 3.6 3.3 5.5 5.1-10.6 11.4-21.1 24.4-31.1 38.5-17.2 1.6-33.6 4.1-48.7 7.6-1-4-1.8-7.8-2.6-11.4zm157.5 38.8c-3.6-6.2-7.3-12.3-11.1-18.3 11.6 1.5 22.8 3.4 33.3 5.8-3.1 10.1-7.1 20.6-11.7 31.4-3.3-6.1-6.8-12.5-10.5-18.9zm-64.2-62.5c7.2 7.8 14.4 16.5 21.5 25.9-7.1-.3-14.4-.5-21.7-.5-7.2 0-14.4.2-21.5.5 7.1-9.3 14.4-18 21.7-25.9zm-64.6 62.7c-3.6 6.3-7 12.6-10.3 18.9-4.5-10.8-8.4-21.4-11.6-31.6 10.4-2.3 21.5-4.2 33.1-5.7-3.9 5.9-7.6 12.1-11.2 18.4zm11.5 93.1c-12-1.3-23.2-3.1-33.6-5.4 3.2-10.4 7.2-21.2 11.8-32.2 3.3 6.3 6.7 12.6 10.3 18.9 3.7 6.4 7.5 12.6 11.5 18.7zm53.5 44.3c-7.4-8-14.8-16.8-22-26.3 7 .3 14.1.4 21.4.4 7.4 0 14.8-.2 22-.5-7.1 9.7-14.3 18.5-21.4 26.4zm74.4-82.5c4.9 11.1 9 21.9 12.3 32.1-10.6 2.4-22 4.4-34 5.8 3.8-6 7.5-12.2 11.2-18.6 3.7-6.4 7.2-12.8 10.5-19.3zm-24.1 11.6c-5.7 9.9-11.6 19.3-17.5 28.3-10.8.8-22 1.2-33.4 1.2-11.4 0-22.4-.4-33-1-6.2-9-12.2-18.5-17.8-28.3-5.7-9.8-10.9-19.6-15.6-29.4 4.7-9.8 9.9-19.7 15.5-29.4 5.6-9.8 11.6-19.2 17.7-28.2 10.9-.8 22-1.2 33.2-1.2 11.3 0 22.4.4 33.3 1.3 6 8.9 11.9 18.3 17.6 28.1 5.7 9.9 11 19.7 15.7 29.3-4.7 9.5-10 19.4-15.7 29.3zm32.2-174.1c12.2 7 17 35.5 9.3 72.8-.5 2.4-1 4.8-1.6 7.3-15.1-3.5-31.6-6.1-48.8-7.7-10-14.3-20.4-27.3-30.9-38.5 2.8-2.7 5.6-5.3 8.4-7.7 26.9-23.6 52.1-32.8 63.6-26.2zM250 217.1c18 0 32.6 14.6 32.6 32.6S268 282.3 250 282.3s-32.6-14.6-32.6-32.6 14.6-32.6 32.6-32.6z"/></svg></button> <button id="close-nav" aria-label="Close navigation" class="view appearance-none hidden rounded-full items-center justify-center text-white cursor-pointer" style="background-color:var(--docs-theme-color); width:4rem; height:4rem; padding:10px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="currentColor" class="w-full"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"/></svg></button></div><div class="view flex-row flex-nowrap relative"><div id="navigation" class="navigation view fixed wide:sticky wide:left-0 z-10 opacity-0 wide:opacity-1 h-screen inset-y-0 w-72 border-right border-color-faint bg-theme"><nav id="navigation-scroller" class="view overflow-x-hidden overflow-y-auto h-full p-6 pt-12"><h1 class="m-0 mb-4" style="font-size:1rem;"><a class="view no-underline group font-semibold" href="/react-native-web/" style="color:var(--docs-theme-color)"><span class="view flex-row items-center overflow-x-hidden mb-1 text-xl">React Native for Web </span><span>react-native-web@0.19.0</span></a></h1><ul class="view list-none mt-6"><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Getting started</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/" style="padding:2px 10px; margin:-2px -10px;">Introduction</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/installation/" style="padding:2px 10px; margin:-2px -10px;">Installation</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/setup/" style="padding:2px 10px; margin:-2px -10px;">Setup</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/multi-platform/" style="padding:2px 10px; margin:-2px -10px;">Multi-platform setup</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/browser-compatibility/" style="padding:2px 10px; margin:-2px -10px;">Browser compatibility</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/react-native-compatibility/" style="padding:2px 10px; margin:-2px -10px;">React Native compatibility</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/help/" style="padding:2px 10px; margin:-2px -10px;">Help</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Main concepts</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/accessibility/" style="padding:2px 10px; margin:-2px -10px;">Accessibility <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/interactions/" style="padding:2px 10px; margin:-2px -10px;">Interactions <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/localization/" style="padding:2px 10px; margin:-2px -10px;">Localization</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/rendering/" style="padding:2px 10px; margin:-2px -10px;">Rendering</a></li><li class="view item mb-2"><a class="text block font-semibold text-color-inherit" href="/react-native-web/docs/styling/" style="padding:2px 10px; margin:-2px -10px;
|
||
|
||
background-color:var(--docs-theme-color-faded); border-left:3px solid var(--docs-theme-color); margin-left:-13px; border-radius:0 0.25rem 0.25rem 0;">Styling <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Components</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/activity-indicator/" style="padding:2px 10px; margin:-2px -10px;">ActivityIndicator</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/checkbox/" style="padding:2px 10px; margin:-2px -10px;">CheckBox</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/image/" style="padding:2px 10px; margin:-2px -10px;">Image</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/image-background/" style="padding:2px 10px; margin:-2px -10px;">ImageBackground</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/lists/" style="padding:2px 10px; margin:-2px -10px;">Lists</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/modal/" style="padding:2px 10px; margin:-2px -10px;">Modal</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/picker/" style="padding:2px 10px; margin:-2px -10px;">Picker</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/pressable/" style="padding:2px 10px; margin:-2px -10px;">Pressable</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/progress-bar/" style="padding:2px 10px; margin:-2px -10px;">ProgressBar</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/scroll-view/" style="padding:2px 10px; margin:-2px -10px;">ScrollView</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/switch/" style="padding:2px 10px; margin:-2px -10px;">Switch</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/text/" style="padding:2px 10px; margin:-2px -10px;">Text <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/text-input/" style="padding:2px 10px; margin:-2px -10px;">TextInput <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/view/" style="padding:2px 10px; margin:-2px -10px;">View <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">APIs</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/animated/" style="padding:2px 10px; margin:-2px -10px;">Animated</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/app-registry/" style="padding:2px 10px; margin:-2px -10px;">AppRegistry</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/app-state/" style="padding:2px 10px; margin:-2px -10px;">AppState</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/appearance/" style="padding:2px 10px; margin:-2px -10px;">Appearance</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/clipboard/" style="padding:2px 10px; margin:-2px -10px;">Clipboard</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/dimensions/" style="padding:2px 10px; margin:-2px -10px;">Dimensions</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/linking/" style="padding:2px 10px; margin:-2px -10px;">Linking</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/pan-responder/" style="padding:2px 10px; margin:-2px -10px;">PanResponder</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/pixel-ratio/" style="padding:2px 10px; margin:-2px -10px;">PixelRatio</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/platform/" style="padding:2px 10px; margin:-2px -10px;">Platform</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/style-sheet/" style="padding:2px 10px; margin:-2px -10px;">StyleSheet</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/vibration/" style="padding:2px 10px; margin:-2px -10px;">Vibration</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Hooks</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/use-color-scheme/" style="padding:2px 10px; margin:-2px -10px;">useColorScheme</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/use-locale-context/" style="padding:2px 10px; margin:-2px -10px;">useLocaleContext</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/use-window-dimensions/" style="padding:2px 10px; margin:-2px -10px;">useWindowDimensions</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Appendix</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/unstable-apis/" style="padding:2px 10px; margin:-2px -10px;">Unstable APIs</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/about-project/" style="padding:2px 10px; margin:-2px -10px;">About the project</a></li></ul></li></ul></nav></div><main id="main" class="view flex-1"><div class="view w-full mt-12 px-4 wide:px-20"><article class="markdown"><h1>Styling</h1><div class="lead"><p>React Native for Web relies on authoring styles in JavaScript and produces optimized CSS.</p></div><p>Style declarations are authored in JavaScript and applied to elements using the <code>style</code> prop. React Native for Web includes a very small CSS reset that only removes unwanted User Agent styles beyond the reach of React components. All other styles are scoped to components and implemented as “utility” CSS that deduplicates styles and provides reliable rendering.</p><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> <span class="token function-variable function">Component</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span></code></pre><p>Style performance is improved when styles are defined outside of components using the <code>StyleSheet</code> API. This creates opaque references to the styles that cannot be directly accessed unless first passed to <code>StyleSheet.flatten</code>.</p><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> <span class="token function-variable function">Component</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>root<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span></code></pre><p>All the React Native components accept a <code>style</code> property. The value can be a registered object, a plain object, or an array of objects. The array syntax will merge styles from left-to-right as normal JavaScript objects, and can be used to conditionally apply styles:</p><pre class="language-jsx"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span> styles<span class="token punctuation">.</span>element<span class="token punctuation">,</span> isActive <span class="token operator">&&</span> styles<span class="token punctuation">.</span>active <span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span></code></pre><p>To let other components customize the style of a component’s children you can expose a prop so styles can be explicitly passed into the component.</p><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">function</span> <span class="token function">List</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>style<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token punctuation">{</span>elements<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span> styles<span class="token punctuation">.</span>element<span class="token punctuation">,</span> props<span class="token punctuation">.</span>elementStyle <span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><br> <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">List</span></span><br> <span class="token attr-name">elementStyle</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>listElement<span class="token punctuation">}</span></span><br> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span></span><br> <span class="token punctuation">/></span></span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre><p>You have greater control over how styles are composed when compared to using class names. For example, you may choose to accept a limited subset of style props in the component’s API, and control the order and conditions of their merging.</p><hr><h2 id="styles-api" tabindex="-1"><a class="header-anchor" href="#styles-api"><span>Styles API</span></a></h2><p>React Native for Web supports all <em>long-form</em> CSS properties. There is no direct support for <code>@</code>-rules, selectors, pseudo-selectors, and pseudo-elements, equivalents of which are demonstrated in the <a href="#styling-patterns">styling patterns</a> section below.</p><h3 id="short-form-properties" tabindex="-1"><a class="header-anchor" href="#short-form-properties"><span>Short-form properties</span></a></h3><p>The supported short-form CSS properties accept only a <em>single</em> value.</p><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">borderColor</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?string</span><p>Accepts only a single value that is applied to all sides.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">borderRadius</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(number | string)</span><p>Accepts only a single value that is applied to all sides.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">borderStyle</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?string</span><p>Accepts only a single value that is applied to all sides.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">borderWidth</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(number | string)</span><p>Accepts only a single value that is applied to all sides.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">flex</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?number</span><p>Accepts only positive integers, <code>0</code>, or <code>-1</code>.<br>The value of <code>-1</code> is non-standard and equivalent to setting <code>flowGrow:0</code> and <code>flexShrink:1</code>.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">inset</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(string | number)</span><p>Equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset">inset</a>.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">insetBlock</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(string | number)</span><p>Equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block">inset-block</a>.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">insetInline</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(string | number)</span><p>Equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline">inset-inline</a>.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">margin</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(number | string)</span><p>Accepts only a single value that is applied to all sides.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">marginBlock</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(number | string)</span><p>Equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block">margin-block</a>.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">marginInline</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(number | string)</span><p>Equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline">margin-inline</a>. Accepts only a single value.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">overflow</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?("auto" | "hidden" | "visible")</span><p>Accepts only a single value that is applied to both axes.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">overscrollBehavior</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?("auto" | "contain" | "none")</span><p>Accepts only a single value that is applied to both axes.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">padding</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(number | string)</span><p>Accepts only a single value that is applied to all sides.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">paddingBlock</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(number | string)</span><p>Equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block">padding-block</a>.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">paddingInline</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?(number | string)</span><p>Equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline">padding-inline</a>. Accepts only a single value.</p></div><h3 id="non-standard-properties" tabindex="-1"><a class="header-anchor" href="#non-standard-properties"><span>Non-standard properties</span></a></h3><p>React Native for Web includes compatibility with the following non-standard React Native properties and values.</p><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">animationKeyframes</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?Object</span><p>A web-only CSS extension for defining keyframes. The value is an object representing a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS keyframes definition</a>. For example: <code>{ '0%': { opacity: 1 } }</code>.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">pointerEvents</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?("all" | "none" | "box-only" | "box-none")</span><p>Equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events">CSS pointer-events</a> with 2 additional values. A value of <code>"box-none"</code> preserves pointer events on the element’s children; <code>"box-only"</code> disables pointer events on the element’s children.</p></div><div class="prop border-left border-left-3 border-theme-faint pl-5 overflow-ellipsis"><span class="font-bold">writingDirection</span><span aria-hidden="true">:</span> <span class="whitespace-nowrap text-color-faint">?("auto" | "ltr" | "rtl")</span><p>Equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction">direction</a>.</p></div><hr><h2 id="text-style-inheritance" tabindex="-1"><a class="header-anchor" href="#text-style-inheritance"><span>Text style inheritance</span></a></h2><p>Web developers will be used to setting “global” font styles that are applied to the entire document, taking advantage of inherited CSS properties.</p><pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span><br> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span><br> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span><br> <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre><p>However, this approach is problematic for component-based systems, as the rendering of a component may be affected by text styles unexpectedly inherited from its ancestors. React Native for Web adopts the same inheritance restrictions found in React Native: all text nodes <strong>must</strong> be contained by a <code>Text</code> component and cannot be rendered directly within a <code>View</code>; and text style inheritance is only available within <code>Text</code> subtrees.</p><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// BAD</span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">Some text</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><br><span class="token comment">// GOOD</span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Some text</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span></code></pre><p>The consequence of this is that default text styles cannot be set on <code>View</code> for an entire subtree. Although this may seem limiting, it ensures that different design systems can co-exist on the same page and text styles are always encapsulated. The recommended way to use consistent text styles across your application is to create a custom text component (e.g., <code>AppText</code>) that implements those styles and forms the basis of further app-specific text customization.</p><pre class="language-jsx"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">AppHeaderText</span></span><span class="token punctuation">></span></span><span class="token plain-text">App header text</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">AppHeaderText</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">AppText</span></span><span class="token punctuation">></span></span><span class="token plain-text">App default text</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">AppText</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span></code></pre><p>This still allows for text style inheritance within the <code>Text</code> subtree.</p><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> bold <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">'bold'</span> <span class="token punctuation">}</span><br><span class="token keyword">const</span> red <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>bold<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> I am bold<br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>red<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">and red</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span></code></pre><p>This approach means that components are designed with isolation in mind. You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will <em>look and behave</em> the same way. Text properties that could inherit from outside of the props would break this isolation.</p><hr><h2 id="styling-patterns" tabindex="-1"><a class="header-anchor" href="#styling-patterns"><span>Styling patterns</span></a></h2><p>The styling system in React Native is a way of defining the styles your application requires; it does not concern itself with <em>where</em> or <em>when</em> those styles are applied to elements. As a result, there is no dedicted Media Query or pseudo-class API built into the styling system. Instead, the state of the application should be derived from the equivalent JavaScript APIs that have the benefit of not being limited to modifying only styles.</p><h3 id="responsive-layouts" tabindex="-1"><a class="header-anchor" href="#responsive-layouts"><span>Responsive layouts</span></a></h3><p>Media Queries may not be most appropriate for component-based designs, as adapting to the dimensions of a container is often preferred. This can be done with the <code>onLayout</code> prop found on all the core components. If you do choose to use Media Queries, using them in JavaScript via the <code>matchMedia</code> DOM API has the benefit of allowing you to swap out entire components, not just styles.</p><h3 id="interaction-states" tabindex="-1"><a class="header-anchor" href="#interaction-states"><span>Interaction states</span></a></h3><p>Interactions such as hover, focus, and press should be implemented using events (e.g., <code>onFocus</code>). Components like <code>Pressable</code> expose interaction state in a ready-to-use form.</p><h3 id="debugging" tabindex="-1"><a class="header-anchor" href="#debugging"><span>Debugging</span></a></h3><p>React Dev Tools supports inspecting and editing of React Native styles. It’s recommended that you rely more on React Dev Tools and live/hot-reloading rather than inspecting and editing the DOM directly.</p><hr><h2 id="how-it-works" tabindex="-1"><a class="header-anchor" href="#how-it-works"><span>How it works</span></a></h2><p>Style resolution is deterministic and slightly different from CSS. In the following HTML/CSS example, the <code>.margin</code> selector is defined last in the CSS and takes precedence over the previous rules, resulting in a margin of <code>0,0,0,0</code>.</p><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token selector">.marginTop</span> <span class="token punctuation">{</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span><br> <span class="token selector">.marginBottom</span> <span class="token punctuation">{</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span><br> <span class="token selector">.margin</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marginTop marginBottom margin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><p>But in React Native for Web the most <em>precise</em> style property takes precedence, resulting in margins of <code>10,0,20,0</code>.</p><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token punctuation">[</span><br> <span class="token punctuation">{</span> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">{</span> <span class="token literal-property property">marginBottom</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">{</span> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><br><span class="token punctuation">]</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> <span class="token function-variable function">Box</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span></code></pre><p>React Native for Web transforms styles objects into CSS and inline styles. Any styles defined using <code>StyleSheet.create</code> will ultimately be rendered using CSS class names. Each rule is broken down into declarations, properties are expanded to their long-form, and the resulting key-value pairs are mapped to unique “atomic CSS” class names.</p><p>Input:</p><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Box</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>box<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><br><br><span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">box</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">0</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>Output:</p><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token selector">.r-156q2ks</span> <span class="token punctuation">{</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span><br> <span class="token selector">.r-61z16t</span> <span class="token punctuation">{</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span><br> <span class="token selector">.r-p1pxzi</span> <span class="token punctuation">{</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span><br> <span class="token selector">.r-11wrixw</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>r-156q2ks r-61z16t r-p1pxzi r-11wrixw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><p>This ensures that CSS order doesn’t impact rendering and CSS rules are efficiently deduplicated. Rather than the total CSS growing in proportion to the number of <em>rules</em>, it grows in proportion to the number of <em>unique declarations</em>. As a result, the DOM style sheet is only written to when new unique declarations are defined and it is usually small enough to be pre-rendered and inlined.</p><p>Class names are deterministic, which means that the resulting CSS and HTML is consistent across builds – important for large apps using code-splitting and deploying incremental updates.</p><p>At runtime registered styles are resolved to DOM style props and memoized. Any dynamic styles that contain declarations previously registered as static styles can also be converted to CSS class names. Otherwise, they render as inline styles.</p></article><div class="flex mt-4"><div class="inline-block w-auto text-sm pt-1 pb-1 mr-2 rounded text-color-faint">Updated <time datetime="2023-03-27T21:05:00.501Z">March 27, 2023</time></div><a class="no-underline inline-block w-auto text-sm hover:bg-gray-200 py-1 px-3 rounded text-color-faint" href="https://github.com/necolas/react-native-web/edit/master/packages/docs/./src/pages/docs/concepts/styling.md" target="_blank">Edit</a></div><div class="view flex-row items-center mt-12 py-4 border-top border-color-faint"><a aria-label="Link to React Native for Web GitHub repository" class="inline-block mr-2 opacity-50 hover:opacity-100 text-color" style="width:20px;height:20px;vertical-align:middle;" rel="noopener noreferrer" href="https://github.com/necolas/react-native-web" target="_blank"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-full"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><div class="text text-sm text-color-faint"><a class="no-underline" href="/react-native-web/">React Native for Web</a> – <span>Copyright © Nicolas Gallagher and Meta Platforms, Inc.</span></div></div></div></main></div></div></div></body></html> |