import Document , { Head , Main , NextScript , DocumentContext , } from 'next/document' ; import React from 'react' ; import { AppRegistry } from 'react-native' ; import config from '../app.json' ; 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 = renderPage ( ) ; const styles = [ < style dangerouslySetInnerHTML = { { __html : normalizeNextElements } } />, getStyleElement ( ) , ] ; return { ... page , styles : React . Children . toArray ( styles ) } ; } render ( ) { return ( < html style = { { height : '100%' } } > < Head > < link rel = "apple-touch-icon" sizes = "180x180" href = "/apple-touch-icon.png" / > < link rel = "icon" type = "image/png" sizes = "32x32" href = "/favicon-32x32.png" / > < link rel = "icon" type = "image/png" sizes = "16x16" href = "/favicon-16x16.png" / > < link rel = "manifest" href = "/site.webmanifest" / > < /Head> < body style = { { height : '100%' , overflow : 'hidden' } } > < Main /> < NextScript / > < /body> < /html>); } }