mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-16 12:20:15 +00:00
Nicolas Gallagher
3 lines
39 KiB
HTML
3 lines
39 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Rendering // React Native for Web</title><meta property="og:title" content="Rendering // 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{opacity:0;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:"\201C""\201D""\2018""\2019";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.15.6</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/multi-platform/" style="padding:2px 10px; margin:-2px -10px;">Multi-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/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</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 font-semibold text-color-inherit" href="/react-native-web/docs/rendering/" 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;">Rendering</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/styling/" style="padding:2px 10px; margin:-2px -10px;">Styling</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/button/" style="padding:2px 10px; margin:-2px -10px;">Button</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 <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#86b300; color:#86b300; font-weight:normal">New</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/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 <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#86b300; color:#86b300; font-weight:normal">New</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/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</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/docs/touchables/" style="padding:2px 10px; margin:-2px -10px;">Touchables</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/i18n-manager/" style="padding:2px 10px; margin:-2px -10px;">I18nManager <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/linking/" style="padding:2px 10px; margin:-2px -10px;">Linking <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/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-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>Rendering</h1><div class="lead"><p>Client and server rendering with React Native for Web.</p></div><p>React Native for Web can be used for multi-platform and web-only applications. It can incrementally adopted by existing React Web apps and integrated with existing React Native apps. Preact is also supported.</p><p>React Native for Web components interoperate with React DOM components. They can be incrementally introduced at any point in an application’s component tree. One thing to be aware of is that external CSS applied to <em>all</em> tags in a document may interfere with the default rendering of some React Native for Web components.</p><hr><h2 id="client-api">Client API <a class="header-anchor" href="#client-api">#</a></h2><p>Render apps using <a href="/react-native-web/docs/app-registry">AppRegistry</a>:</p><pre class="language-js"><code class="language-js"><span class="token comment">// index.web.js</span><br><br><span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./src/App'</span><span class="token punctuation">;</span><br><br><span class="token comment">// register the app</span><br>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'App'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> App<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>AppRegistry<span class="token punctuation">.</span><span class="token function">runApplication</span><span class="token punctuation">(</span><span class="token string">'App'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> initialProps<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> rootTag<span class="token operator">:</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>Or render individual components:</p><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> Header <span class="token keyword">from</span> <span class="token string">'./src/Header'</span><span class="token punctuation">;</span><br><br><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Header <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'header'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre><p>You might need to adjust the styles of the HTML document’s root elements for your app to fill the viewport.</p><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">height</span><span class="token punctuation">:</span>100%</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">height</span><span class="token punctuation">:</span>100%</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">display</span><span class="token punctuation">:</span>flex<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>100%</span><span class="token punctuation">"</span></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><div class="callout"><p><strong>Warning!</strong> Although components in can be rendered by calling <code>ReactDOM.render</code> directly, this will not set the global context React Native provides to components when using the <code>AppRegistry</code> API.</p></div><hr><h2 id="server-api">Server API <a class="header-anchor" href="#server-api">#</a></h2><p>Server-side rendering to HTML is supported using <code>AppRegistry</code>:</p><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./src/App'</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> ReactDOMServer <span class="token keyword">from</span> <span class="token string">'react-dom/server'</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-web'</span><span class="token punctuation">;</span><br><br><span class="token comment">// register the app</span><br>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'App'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> App<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// prerender the app</span><br><span class="token keyword">const</span> <span class="token punctuation">{</span> element<span class="token punctuation">,</span> getStyleElement <span class="token punctuation">}</span> <span class="token operator">=</span> AppRegistry<span class="token punctuation">.</span><span class="token function">getApplication</span><span class="token punctuation">(</span><span class="token string">'App'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> initialProps <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token comment">// first the element</span><br><span class="token keyword">const</span> html <span class="token operator">=</span> ReactDOMServer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token comment">// then the styles (optionally include a nonce if your CSP policy requires it)</span><br><span class="token keyword">const</span> css <span class="token operator">=</span> ReactDOMServer<span class="token punctuation">.</span><span class="token function">renderToStaticMarkup</span><span class="token punctuation">(</span><span class="token function">getStyleElement</span><span class="token punctuation">(</span><span class="token punctuation">{</span> nonce <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// example HTML document string</span><br><span class="token keyword">const</span> document <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br><!DOCTYPE html><br><html style="height:100%"><br><meta charset="utf-8"><br><meta name="viewport" content="width=device-width, initial-scale=1"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>css<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br><body style="height:100%; overflow-y:hidden"><br><div id="root" style="display:flex; height: 100%"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>html<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br></div><br><script nonce="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>nonce<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" src="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>bundlePath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></script><br></span><span class="token template-punctuation string">`</span></span></code></pre></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="2021-03-31T02:10:12.046Z">March 30, 2021</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/rendering.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 Facebook Inc.</span></div></div></div></main></div></div></div></body></html> |