React Native Get Device Height Width on Button Click

React native by default gives us a class named as Dimensions which is used for many work. But in this tutorial we would going to use this class to obtain the Android + iPhone mobile device Height and Width using react native mobile application on button click and show inside Alert Dialog message. So here is the complete step by step tutorial for React Native Get Device Height Width on Button Click programmatically project.

Contents in this project Get Device Height Width on Button Click :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Import AppRegistry, StyleSheet, Text, View, Button, Dimensions and Alert component.

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, Text, View, Button, Dimensions,Alert } from ‘react-native’;

import React, { Component } from ‘react’;

import { AppRegistry, StyleSheet, Text, View, Button, Dimensions,Alert } from ‘react-native’;

3. Create a function named as GetHeightFunction() in your project’s class . This class is used to get height of your Android and iOS mobile phone device using Dimensions.get(‘window’).height method. After getting the height we would save that height into a const variable. Now we would show that height on screen using Alert message.

<br />
GetHeightFunction = () =><br />
  {<br />
    const Height_Holder = Dimensions.get(‘window’).height;</p>
<p>    Alert.alert(“Device Height: ” + Height_Holder);<br />
  }

GetHeightFunction = () =>

{

const Height_Holder = Dimensions.get(‘window’).height;

Alert.alert(“Device Height: “ + Height_Holder);

}

4. Create another function named as GetWidthFunction() to obtain the width of your device.

<br />
GetWidthFunction = () =><br />
  {<br />
    const Width_Holder = Dimensions.get(‘window’).width;</p>
<p>    Alert.alert(“Device Width: ” + Width_Holder);<br />
  }

GetWidthFunction = () =>

{

const Width_Holder = Dimensions.get(‘window’).width;

Alert.alert(“Device Width: “ + Width_Holder);

}

5. Create a View as Parent View in render’s return block.

<br />
<View style={styles.MainContainer}></p>
<p></View>

</View>

6. Create 2 children View inside the Parent View. Each children view holds a Button component.

<br />
<View style={styles.MainContainer}></p>
<p>        <View style={styles.ButtonStyle}></p>
<p>        </View></p>
<p>        <View style={styles.ButtonStyle}></p>
<p>        </View>  </p>
<p></View>

</View>

</View>

7. Now Create 2 buttons inside each Children View and call the GetHeightFunction() and GetWidthFunction() function on each button onPress.

<br />
<View style={styles.MainContainer}></p>
<p>        <View style={styles.ButtonStyle}></p>
<p>          <Button title = “Click Here To Show Device Height” onPress = { this.GetHeightFunction }/></p>
<p>        </View></p>
<p>        <View style={styles.ButtonStyle}></p>
<p>          <Button title = “Click Here To Show Device Width” onPress = { this.GetWidthFunction } /></p>
<p>        </View>  </p>
<p></View>

</View>

</View>

8. Create custom Style sheet class.

<br />
const styles = StyleSheet.create({<br />
  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    backgroundColor: ‘#F5FCFF’,<br />
    margin: 10,<br />
  },</p>
<p>  ButtonStyle: {</p>
<p>    margin: 10</p>
<p>  }</p>
<p>});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

backgroundColor: ‘#F5FCFF’,

margin: 10,

ButtonStyle: {

margin: 10

}

});

9. Complete source code for index.android.js / index.ios.js file.

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, Text, View, Button, Dimensions,Alert } from ‘react-native’;</p>
<p>export default class Project extends Component {</p>
<p>  GetHeightFunction = () =><br />
  {<br />
    const Height_Holder = Dimensions.get(‘window’).height;</p>
<p>    Alert.alert(“Device Height: ” + Height_Holder);<br />
  }</p>
<p>  GetWidthFunction = () =><br />
  {<br />
    const Width_Holder = Dimensions.get(‘window’).width;</p>
<p>    Alert.alert(“Device Width: ” + Width_Holder);<br />
  }</p>
<p>  render() {<br />
    return (<br />
      <View style={styles.MainContainer}></p>
<p>        <View style={styles.ButtonStyle}></p>
<p>          <Button title = “Click Here To Show Device Height” onPress = { this.GetHeightFunction }/></p>
<p>        </View></p>
<p>        <View style={styles.ButtonStyle}></p>
<p>          <Button title = “Click Here To Show Device Width” onPress = { this.GetWidthFunction } /></p>
<p>        </View>  </p>
<p>      </View><br />
    );<br />
  }</p>
<p>}</p>
<p>const styles = StyleSheet.create({<br />
  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    backgroundColor: ‘#F5FCFF’,<br />
    margin: 10,<br />
  },</p>
<p>  ButtonStyle: {</p>
<p>    margin: 10</p>
<p>  }</p>
<p>});</p>
<p>AppRegistry.registerComponent(‘Project’, () => Project);