import * as React from 'react'
import {Dimensions} from 'react-native'

type WindowDimensions = {width: number; height: number}

type Props = {
	render: (dimensions: WindowDimensions) => React.ReactNode
}

type State = {
	viewport: WindowDimensions
}

export class Viewport extends React.PureComponent<Props, State> {
	state = {
		viewport: Dimensions.get('window'),
	}

	componentDidMount() {
		Dimensions.addEventListener('change', this.handleResizeEvent)
	}

	componentWillUnmount() {
		Dimensions.removeEventListener('change', this.handleResizeEvent)
	}

	handleResizeEvent = (event: {window: WindowDimensions}) => {
		this.setState(() => ({viewport: event.window}))
	}

	render() {
		return this.props.render(this.state.viewport)
	}
}

import * as React from 'react'
import {Dimensions} from 'react-native'

type WindowDimensions = {width: number; height: number}

type Props = {
	render: (dimensions: WindowDimensions) => React.Node
}

type State = {
	viewport: WindowDimensions
}

export class Viewport extends React.PureComponent<Props, State> {
	state = {
		viewport: Dimensions.get('window'),
	}

	componentDidMount() {
		Dimensions.addEventListener('change', this.handleResizeEvent)
	}

	componentWillUnmount() {
		Dimensions.removeEventListener('change', this.handleResizeEvent)
	}

	handleResizeEvent = (event: {window: WindowDimensions}) => {
		this.setState(() => ({viewport: event.window}))
	}

	render() {
		return this.props.render(this.state.viewport)
	}
}

--- 
+++ 
@@ -4,7 +4,7 @@
 type WindowDimensions = {width: number; height: number}
 
 type Props = {
-	render: (dimensions: WindowDimensions) => React.Node
+	render: (dimensions: WindowDimensions) => React.ReactNode
 }
 
 type State = {
m/viewport: Fix up return type (Node -> ReactNode)

Signed-off-by: Kristofer Rye <1ed31cfd0b53bc3d1689a6fee6dbfc9507dffd22@gmail.com>
