improve setup for react-native-web with next.js

LunatiqueCoder · Dec 19, 2022 · e350f1a · e350f1a · vercel · Dec 19, 2022
1 parent 17bccd1
commit e350f1a
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/template/src/pages/_document.js b/template/src/pages/_document.js
@@ -0,0 +1,37 @@
+import {Children} from 'react';
+import Document, {Html, Head, Main, NextScript} 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%;
+  }
+`;
+
+export default class MyDocument extends Document {
+  static async getInitialProps({renderPage}) {
+    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)};
+  }
+
+  render() {
+    return (
+      <Html style={{height: '100%'}}>
+        <Head />
+        <body style={{height: '100%', overflow: 'hidden'}}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}