/
Screen.js
64 lines (56 loc) · 1.54 KB
/
Screen.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// @flow
import React, { Component } from 'react'
import { Grid } from './Grid'
import { StyleSheet, Dimensions } from 'react-native'
import { screen } from '../constants'
export type ScreenState = {
dimensions: { width: number, height: number },
orientation: 'portrait' | 'landscape',
}
export type ScreenProps = {
absolute: boolean,
style?: Object,
onResize?: ScreenState => any,
}
export default class Screen extends Component<ScreenProps, ScreenState> {
state = {
dimensions: {
width: screen.dimensions.width,
height: screen.dimensions.height,
},
orientation: screen.orientation,
}
_dimensions = screen.dimensions
_onLayout = () => {
const { width, height } = Dimensions.get('window')
if (
this.state.dimensions.width !== width ||
this.state.dimensions.height !== height
) {
// this._dimensions = { width, height }
// this._orientation = width < height ? 'portrait' : 'landscape'
this.setState(
{
dimensions: { width, height },
orientation: width < height ? 'portrait' : 'landscape',
},
() => {
this.props.onResize && this.props.onResize(this.state)
}
)
}
}
render = () => {
const { absolute, style, onResize, ...props } = this.props
const { dimensions } = this.state
return (
<Grid
flex={1}
onLayout={this._onLayout}
justifyContent='flex-start'
{...props}
style={[dimensions, style, absolute && StyleSheet.absoluteFill]}
/>
)
}
}