import React from 'react'
import { StyleSheet, Text, View,Dimensions } from 'react-native'
const dim = Dimensions.get('screen')

export default class App extends React.Component {
  state = {
    screenWidth:dim.width,
    screenHeight:dim.height,
    orientation:this._getOrientation(dim.width,dim.height)
  }

  _getOrientation(width,height){
    if (width < height) return 'Potrait'
    return 'Landscape'
  }

  _updateLayout(event){
    const {width,height}=event.nativeEvent.layout
    let orientation =this._getOrientation(width,height)
    this.setState({
      screenWidth:width,
      screenHeight:height,
      orientation:this._getOrientation(width,height)
    })
  }

  render() {
    return (
      <View style={styles.container} onLayout={ (event) => this._updateLayout(event)}>
        <Text>Orientation : {this.state.orientation}</Text>
        <Text>Width : {this.state.screenWidth}</Text>
        <Text>Height : {this.state.screenHeight}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});