| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- import { ScrollViewStyleReset } from 'expo-router/html';
- import type {PropsWithChildren} from 'react';
- // This file is web-only and used to configure the root HTML for every
- // web page during static rendering.
- // The contents of this function only run in Node.js environments and
- // do not have access to the DOM or browser APIs.
- export default function Root({ children }: PropsWithChildren) {
- return (
- <html lang="en">
- <head>
- <meta charSet="utf-8" />
- <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
- {/*
- Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
- However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
- */}
- <ScrollViewStyleReset />
-
- {/* Add any additional <head> elements that you want globally available on web... */}
- </head>
- <body>
- <style
- dangerouslySetInnerHTML={{
- __html:`
- html,
- body {
- min-height: 100%;
- margin: 0;
-
- }
- * {
- scrollbar-width: none;
- -ms-overflow-style: none;
- }
- ::-webkit-scrollbar {
- display: none;
- width: 0;
- height: 0;
- }
- @media (min-width: 448px) {
- body {
- background:
- radial-gradient(circle at top, rgba(96, 165, 250, 0.18), transparent 32%),
- linear-gradient(180deg, #172554 0%, #0f172a 55%, #020617 100%);
- }
- #root {
- max-width: 448px;
- margin: 0 auto;
- background: #ffffff;
- min-height: 100vh;
- overflow: hidden;
- border-radius: 24px;
- border: 1px solid rgba(255, 255, 255, 0.08);
- box-shadow:
- 0 36px 90px rgba(2, 6, 23, 0.46),
- 0 18px 34px rgba(15, 23, 42, 0.28),
- inset 0 1px 0 rgba(255, 255, 255, 0.9),
- inset 0 -1px 0 rgba(15, 23, 42, 0.06);
- }
- }`
- }}
- />
- <div id="root">
- {children}
- </div>
- </body>
- </html>
- );
- }
|