import { ObservableScreen } from '@ulangi/ulangi-observable' ; import { boundMethod } from 'autobind-decorator' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { GestureResponderEvent , Keyboard , LayoutChangeEvent , SafeAreaView , View , ViewProperties , } from 'react-native' ; export interface ScreenProps extends ViewProperties { observableScreen : ObservableScreen ; useSafeAreaView ? : boolean ; useDismissKeyboardView ? : boolean ; } @ observer export class Screen extends React . Component < ScreenProps > { @ boundMethod public onLayout ( event ) { const { width , height } = event . nativeEvent . layout ; this . props . observableScreen . screenLayout . update ( width , height ) ; } @ boundMethod private onStartShouldSetResponder ( ) { return true ; } @ boundMethod private onMoveShouldSetResponder ( ) { return false ; } @ boundMethod private onResponderRelease ( event ) { Keyboard . dismiss ( ) ; if ( typeof this . props . onResponderRelease !== 'undefined' ) { this . props . onResponderRelease ( event ) ; } } public render ( ) { const props = this . props . useDismissKeyboardView === true ? { ... this . props , onStartShouldSetResponder : this . onStartShouldSetResponder , onMoveShouldSetResponder : this . onMoveShouldSetResponder , onResponderRelease : this . onResponderRelease , } : this . props ; if ( this . props . useSafeAreaView === true ) { return ( < SafeAreaView onLayout = { this . onLayout } { ... props } > { this . renderChildren ( ) } < /SafeAreaView>); } else { return ( < View onLayout = { this . onLayout } { ... props } > { this . renderChildren ( ) } < /View>); } } private renderChildren ( ) { if ( this . props . observableScreen . screenLayout . height && this . props . observableScreen . screenLayout . width ) { return this . props . children ; } else { return null ; } } }