mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
ba5f1b2c21
Utilize ES modules, which are now the default export for `react-native-web`. _NOTE:_ [This example requires `next@^7.0.0`](https://bit.ly/2PaEhao).
40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import Document, { Head, Main, NextScript } from 'next/document'
|
|
import React from 'react'
|
|
import { AppRegistry } from 'react-native-web'
|
|
|
|
// 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('Main', () => Main)
|
|
const { getStyleElement } = AppRegistry.getApplication('Main')
|
|
const page = renderPage()
|
|
const styles = [
|
|
<style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
|
|
getStyleElement()
|
|
]
|
|
return { ...page, styles: React.Children.toArray(styles) }
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<html style={{ height: '100%' }}>
|
|
<Head>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
|
</Head>
|
|
<body style={{ height: '100%', overflow: 'hidden' }}>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
}
|