1/** 2 * Copyright © 2023 650 Industries. 3 * 4 * This source code is licensed under the MIT license found in the 5 * LICENSE file in the root directory of this source tree. 6 */ 7import React from 'react'; 8 9/** 10 * Root style-reset for full-screen React Native web apps with a root `<ScrollView />` should use the following styles to ensure native parity. [Learn more](https://necolas.github.io/react-native-web/docs/setup/#root-element). 11 */ 12export function ScrollViewStyleReset() { 13 return ( 14 <style 15 id="expo-reset" 16 dangerouslySetInnerHTML={{ 17 __html: `#root,body{display:flex}#root,body,html{width:100%;-webkit-overflow-scrolling:touch;margin:0;padding:0;min-height:100%}#root{flex-shrink:0;flex-basis:auto;flex-grow:1;flex:1}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;height:calc(100% + env(safe-area-inset-top))}body{overflow-y:auto;overscroll-behavior-y:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-overflow-style:scrollbar}`, 18 }} 19 /> 20 ); 21} 22 23export function Html({ children }: { children: React.ReactNode }) { 24 return ( 25 <html lang="en"> 26 <head> 27 <meta charSet="utf-8" /> 28 <meta httpEquiv="X-UA-Compatible" content="IE=edge" /> 29 <meta 30 name="viewport" 31 content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover" 32 /> 33 <ScrollViewStyleReset /> 34 </head> 35 <body>{children}</body> 36 </html> 37 ); 38} 39