diff options
| author | Santo Cariotti <santo@dcariotti.me> | 2024-08-28 15:53:21 +0200 |
|---|---|---|
| committer | Santo Cariotti <santo@dcariotti.me> | 2024-08-28 15:53:21 +0200 |
| commit | 83643a78b73dee5610be6ad9837fb72e9b944cb7 (patch) | |
| tree | 1eca6bad452656f78879c829181362f3b586d697 /app/+html.tsx | |
Initial commit
Generated by create-expo-app 3.0.0.
Diffstat (limited to 'app/+html.tsx')
| -rw-r--r-- | app/+html.tsx | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/app/+html.tsx b/app/+html.tsx new file mode 100644 index 0000000..8b92456 --- /dev/null +++ b/app/+html.tsx @@ -0,0 +1,39 @@ +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 /> + + {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} + <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} /> + {/* Add any additional <head> elements that you want globally available on web... */} + </head> + <body>{children}</body> + </html> + ); +} + +const responsiveBackground = ` +body { + background-color: #fff; +} +@media (prefers-color-scheme: dark) { + body { + background-color: #000; + } +}`; |