1import React, { Component } from 'react';
2import ReactNative, { AppRegistry, View, TouchableOpacity, findNodeHandle, Text, StyleSheet } from 'react-native';
3
4
5export default class App extends Component {
6
7  constructor() {
8    super();
9
10    this.state = { x: null, y: null, width: null, height: null }
11  }
12
13  calculateDimensions = () => {
14    this.refs.innerView.measureLayout(ReactNative.findNodeHandle(this.refs.containerView), (xPos, yPos, Width, Height) => {
15      this.setState({ x: xPos, y: yPos, width: Width, height: Height });
16    });
17  }
18
19  render() {
20    return (
21      <View ref="containerView" style={styles.container}>
22        <View ref="innerView" style={styles.innerView}>
23          <Text style={styles.text}>X: {this.state.x}</Text>
24          <Text style={styles.text}>Y: {this.state.y}</Text>
25          <Text style={styles.text}>Width: {this.state.width}</Text>
26          <Text style={styles.text}>Height: {this.state.height}</Text>
27        </View>
28
29        <TouchableOpacity activeOpacity={0.8} style={styles.ButtonDesign} onPress={this.calculateDimensions}>
30          <Text style={styles.text}>Calculate Blue Box's Dimensions</Text>
31        </TouchableOpacity>
32      </View>
33    );
34  }
35}
36
37const styles = StyleSheet.create(
38  {
39    container: {
40      flex: 1,
41      justifyContent: "center",
42      alignItems: "center",
43
44    },
45    innerView: {
46      backgroundColor: '#ff5722',
47      width: '70%',
48      height: '70%',
49      marginBottom: 50,
50      justifyContent: 'center',
51      alignItems: 'center'
52    },
53    ButtonDesign: {
54      position: 'absolute',
55      left: 0,
56      right: 0,
57      bottom: 0,
58      paddingHorizontal: 10,
59      height: 50,
60      justifyContent: 'center',
61      alignItems: 'center',
62      backgroundColor: '#0091ea',
63    },
64    text: {
65      color: 'white',
66      fontSize: 17
67    },
68
69  });