zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-12 14:04:10 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
a4833ba17237753473bb8528350379efb79d203d
react-native-web/docs-preview/docs/multi-platform/index.html
T
Nicolas Gallagher 0f7628717f Deploy documentation
2021-02-02 16:32:58 -08:00

3 lines
48 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Multi-platform setup</title><meta name="description" content=""><link rel="icon" href="/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:#6b94f3;--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="/" 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.14.11</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="/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="/docs/installation/" style="padding:2px 10px; margin:-2px -10px;">Installation</a></li><li class="view item mb-2"><a class="text block font-semibold text-color-inherit" href="/docs/multi-platform/" 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;">Multi-platform</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/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="/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="/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="/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="/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="/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="/docs/rendering/" style="padding:2px 10px; margin:-2px -10px;">Rendering</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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>Multi-platform setup</h1><div class="lead"><p>An overview of how to integrate React Native for Web into an existing React Native codebase.</p></div><p>If you are interested in making a multi-platform app it is strongly recommended that you use Expo (or learn from the source code for the Web integration). Expo includes <a href="https://docs.expo.io/versions/v35.0.0/guides/running-in-the-browser/">web support</a> and takes care of all the configuration work required.</p><p>If you have an existing application, this guide will surface the areas that require attention and customization before most web bundlers can consume the non-standard JavaScript in packages produced by the React Native ecosystem. Additionally, 3rd party React Native packages with web support are listed in the <a href="https://reactnative.directory/?web=true">React Native Directory</a>.</p><hr><h2 id="package-aliasing">Package aliasing <a class="header-anchor" href="#package-aliasing">#</a></h2><h3 id="bundler">Bundler <a class="header-anchor" href="#bundler">#</a></h3><p>Configure your module bundler to alias the package to <code>react-native</code>. For example, modify your <a href="https://github.com/webpack/webpack">webpack</a> configuration as follows:</p><pre class="language-js"><code class="language-js"><span class="token comment">// webpack.config.js</span><br>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token comment">// ...the rest of your config</span><br><br> resolve<span class="token operator">:</span> <span class="token punctuation">{</span><br> alias<span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token string">'react-native$'</span><span class="token operator">:</span> <span class="token string">'react-native-web'</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre><h3 id="compiler">Compiler <a class="header-anchor" href="#compiler">#</a></h3><p><a href="https://babeljs.io/">Babel</a> supports module aliasing using <a href="https://www.npmjs.com/package/babel-plugin-module-resolver">babel-plugin-module-resolver</a></p><pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token string">"plugins"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token punctuation">[</span><span class="token string">"module-resolver"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token string">"alias"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token string">"^react-native$"</span><span class="token operator">:</span> <span class="token string">"react-native-web"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">]</span><br> <span class="token punctuation">]</span><br><span class="token punctuation">}</span></code></pre><h3 id="jest">Jest <a class="header-anchor" href="#jest">#</a></h3><p><a href="https://facebook.github.io/jest/">Jest</a> can be configured using the provided preset. This will map <code>react-native</code> to <code>react-native-web</code> and provide appropriate mocks. Please refer to the Jest documentation for more information.</p><pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token string">"preset"</span><span class="token operator">:</span> <span class="token string">"react-native-web"</span><br><span class="token punctuation">}</span></code></pre><h3 id="flow">Flow <a class="header-anchor" href="#flow">#</a></h3><p><a href="https://flow.org">Flow</a> can be configured to understand the aliased module. You may also need to include a custom libdef (<a href="https://gist.github.com/paularmstrong/f60b40d16fc83e1e8e532d483336f9bb">example</a>) in your config.</p><pre class="language-yml"><code class="language-yml"><span class="token punctuation">[</span>options<span class="token punctuation">]</span><br>module.name_mapper='^react<span class="token punctuation">-</span>native$' <span class="token punctuation">-</span><span class="token punctuation">></span> 'react<span class="token punctuation">-</span>native<span class="token punctuation">-</span>web'</code></pre><h3 id="node.js">Node.js <a class="header-anchor" href="#node.js">#</a></h3><p>Node.js can alias <code>react-native</code> to <code>react-native-web</code> using <a href="https://www.npmjs.com/package/module-alias"><code>module-alias</code></a>. This is useful if you want to pre-render the app (e.g., server-side rendering or build-time rendering).</p><pre class="language-js"><code class="language-js"><span class="token comment">// Install the `module-alias` package as a dependency first</span><br><span class="token keyword">const</span> moduleAlias <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"module-alias"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>moduleAlias<span class="token punctuation">.</span><span class="token function">addAliases</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token string">"react-native"</span><span class="token operator">:</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"react-native-web"</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token function">moduleAlias</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><hr><h2 id="root-element">Root element <a class="header-anchor" href="#root-element">#</a></h2><p>Full-screen React Native apps may require the following styles inlined in the HTML document shell. (<a href="https://codesandbox.io/s/52x1871vjl?file=/public/index.html:352-644">Example</a>.)</p><pre class="language-css"><code class="language-css"><span class="token comment">/* These styles make the body full-height */</span><br><span class="token selector">html, body</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token comment">/* These styles disable body scrolling if you are using &lt;ScrollView> */</span><br><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token comment">/* These styles make the root element full-height */</span><br><span class="token selector">#root</span> <span class="token punctuation">{</span> <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 class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre><hr><h2 id="web-specific-code">Web-specific code <a class="header-anchor" href="#web-specific-code">#</a></h2><p>Minor platform differences can use the <code>Platform</code> module.</p><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</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> height<span class="token operator">:</span> <span class="token punctuation">(</span>Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'web'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">200</span> <span class="token operator">:</span> <span class="token number">100</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>More significant platform differences should use platform-specific files (see the webpack configuration below for resolving <code>*.web.js</code> files):</p><p>For example, with the following files in your project:</p><pre class="language-shell"><code class="language-shell">MyComponent.android.js<br>MyComponent.ios.js<br>MyComponent.web.js</code></pre><p>And the following import:</p><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> MyComponent <span class="token keyword">from</span> <span class="token string">'./MyComponent'</span><span class="token punctuation">;</span></code></pre><p>React Native will automatically import the correct variant for each specific target platform.</p><hr><h2 id="compiling-and-bundling">Compiling and Bundling <a class="header-anchor" href="#compiling-and-bundling">#</a></h2><p>What follows is only an <em>example</em> of a basic way to package a Web app using <a href="https://webpack.js.org">webpack</a> and <a href="https://babeljs.io/">Babel</a>. (<a href="https://github.com/facebook/metro">Metro</a> is the React Native bundler with <a href="https://github.com/necolas/react-native-web/issues/1257#issuecomment-541443684">undocumented web support</a>.)</p><p>Install webpack-related dependencies, for example:</p><pre class="language-shell"><code class="language-shell"><span class="token function">npm</span> <span class="token function">install</span> --save-dev babel-loader url-loader webpack webpack-cli webpack-dev-server</code></pre><p>React Native’s Babel preset rewrites ES modules to CommonJS modules, preventing bundlers from automatically performing “tree-shaking” to remove unused modules from your web app build. To help with this, you can install the following Babel plugin:</p><pre class="language-shell"><code class="language-shell"><span class="token function">npm</span> <span class="token function">install</span> --save-dev babel-plugin-react-native-web</code></pre><p>Create a <code>web/webpack.config.js</code> file:</p><pre class="language-js"><code class="language-js"><span class="token comment">// web/webpack.config.js</span><br><br><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> appDirectory <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// This is needed for webpack to compile JavaScript.</span><br><span class="token comment">// Many OSS React Native packages are not compiled to ES5 before being</span><br><span class="token comment">// published. If you depend on uncompiled packages they may cause webpack build</span><br><span class="token comment">// errors. To fix this webpack can be configured to compile to the necessary</span><br><span class="token comment">// `node_module`.</span><br><span class="token keyword">const</span> babelLoaderConfiguration <span class="token operator">=</span> <span class="token punctuation">{</span><br> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span><br> <span class="token comment">// Add every directory that needs to be compiled by Babel during the build.</span><br> include<span class="token operator">:</span> <span class="token punctuation">[</span><br> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>appDirectory<span class="token punctuation">,</span> <span class="token string">'index.web.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>appDirectory<span class="token punctuation">,</span> <span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>appDirectory<span class="token punctuation">,</span> <span class="token string">'node_modules/react-native-uncompiled'</span><span class="token punctuation">)</span><br> <span class="token punctuation">]</span><span class="token punctuation">,</span><br> use<span class="token operator">:</span> <span class="token punctuation">{</span><br> loader<span class="token operator">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span><br> options<span class="token operator">:</span> <span class="token punctuation">{</span><br> cacheDirectory<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token comment">// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager</span><br> presets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'module:metro-react-native-babel-preset'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token comment">// Re-write paths to import only the modules needed by the app</span><br> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'react-native-web'</span><span class="token punctuation">]</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br><span class="token comment">// This is needed for webpack to import static images in JavaScript files.</span><br><span class="token keyword">const</span> imageLoaderConfiguration <span class="token operator">=</span> <span class="token punctuation">{</span><br> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(gif|jpe?g|png|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span><br> use<span class="token operator">:</span> <span class="token punctuation">{</span><br> loader<span class="token operator">:</span> <span class="token string">'url-loader'</span><span class="token punctuation">,</span><br> options<span class="token operator">:</span> <span class="token punctuation">{</span><br> name<span class="token operator">:</span> <span class="token string">'[name].[ext]'</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br> entry<span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token comment">// load any web API polyfills</span><br> <span class="token comment">// path.resolve(appDirectory, 'polyfills-web.js'),</span><br> <span class="token comment">// your web-specific entry file</span><br> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>appDirectory<span class="token punctuation">,</span> <span class="token string">'index.web.js'</span><span class="token punctuation">)</span><br> <span class="token punctuation">]</span><span class="token punctuation">,</span><br><br> <span class="token comment">// configures where the build ends up</span><br> output<span class="token operator">:</span> <span class="token punctuation">{</span><br> filename<span class="token operator">:</span> <span class="token string">'bundle.web.js'</span><span class="token punctuation">,</span><br> path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>appDirectory<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// ...the rest of your config</span><br><br> module<span class="token operator">:</span> <span class="token punctuation">{</span><br> rules<span class="token operator">:</span> <span class="token punctuation">[</span><br> babelLoaderConfiguration<span class="token punctuation">,</span><br> imageLoaderConfiguration<br> <span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> resolve<span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// This will only alias the exact import "react-native"</span><br> alias<span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token string">'react-native$'</span><span class="token operator">:</span> <span class="token string">'react-native-web'</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token comment">// If you're working on a multi-platform React Native app, web-specific</span><br> <span class="token comment">// module implementations should be written in files using the extension</span><br> <span class="token comment">// `.web.js`.</span><br> extensions<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'.web.js'</span><span class="token punctuation">,</span> <span class="token string">'.js'</span> <span class="token punctuation">]</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre><p>To run in development from the root of your application:</p><pre class="language-shell"><code class="language-shell">./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors</code></pre><p>To build for production:</p><pre class="language-shell"><code class="language-shell">./node_modules/.bin/webpack -p --config ./web/webpack.config.js</code></pre><p>Please refer to the Webpack documentation for more information on configuration.</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="2021-02-02T01:26:20.571Z">February 1, 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/main/packages/www/./src/pages/docs/getting-started/multi-platform.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 for Web</a> – <span>Copyright © Facebook Inc.</span></div></div></div></main></div></div></div></body></html>
Reference in New Issue View Git Blame Copy Permalink