-document.tsx + AppRegistry.getApplication() TS support

LunatiqueCoder · Dec 19, 2022 · 27a503a · 27a503a · vercel · Dec 19, 2022
1 parent 90223e9
commit 27a503a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 38 deletions.
diff --git a/template/react-native-web.d.ts b/template/react-native-web.d.ts
@@ -1,9 +1,13 @@
 // This file is adapted from: https://github.com/necolas/react-native-web/issues/832#issuecomment-1027393818
 
-import {MouseEvent, UIEvent, FocusEvent} from 'react';
+import {MouseEvent, UIEvent, FocusEvent, ReactNode} from 'react';
 export * from 'react-native';
 
 declare module 'react-native' {
+  namespace AppRegistry {
+    function getApplication(string): {getStyleElement: () => ReactNode};
+  }
+
   // The following list is sourced from:
   // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L76
   type CursorValue =

diff --git a/template/src/pages/_document.js b/template/src/pages/_document.js
diff --git a/template/src/pages/_document.tsx b/template/src/pages/_document.tsx
@@ -0,0 +1,46 @@
+import {Children} from 'react';
+import {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+  DocumentInitialProps,
+} from 'next/document';
+import {AppRegistry} from 'react-native';
+import config from '../app.json';
+// Force Next-generated DOM elements to fill their parent's height
+const normalizeNextElements = `
+  #__next {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;
+
+function MyDocument() {
+  return (
+    <Html style={{height: '100%'}}>
+      <Head />
+      <body style={{height: '100%', overflow: 'hidden'}}>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
+
+MyDocument.getInitialProps = async ({
+  renderPage,
+}: DocumentContext): Promise<DocumentInitialProps> => {
+  AppRegistry.registerComponent(config.name, () => Main);
+  const {getStyleElement} = AppRegistry.getApplication(config.name);
+  const page = await renderPage();
+  const styles = [
+    <style dangerouslySetInnerHTML={{__html: normalizeNextElements}} />,
+    getStyleElement(),
+  ];
+  return {...page, styles: Children.toArray(styles)};
+};
+
+export default MyDocument;