React Native Get Device Height Width on Button Click
Tags: android, mobileapplicationd, reactnative
Published: 2019-01-04 08:06:26

---
title: React Native Get Device Height Width on Button Click
published: true
tags: android,Mobile Application D,React Native
canonical_url: 
---

Source : <a href="https://www.skptricks.com/2019/01/react-native-get-device-height-width-on-button-click.html"> React Native Get Device Height Width On Button Click </a>

This tutorial explains **how to get device width and height on button click in react native application**. In react native we are having default class that is  **Dimensions,** which is a part of " **react-native**" package. This dimension class helps to _detect android or ios device screen width and height_ in very easy way.  
  
First thing first, **_import Dimension class from the "react-native" package._**  

```
import {Dimensions } from "react-native";
```
  
You can get device width and height using below  :  
  
**Get device screen width :**  

```
 const screenWidth = Math.round(Dimensions.get('window').width);
```
  
**Get device screen height:**  

```
const screenHeight = Math.round(Dimensions.get('window').height);
```
  

[![React Native Get Device Height Width on Button Click](https://2.bp.blogspot.com/-3s72Ha578q4/XC7skslyGoI/AAAAAAAACSg/NVnlCq9rcC4c_1zVIiiPZP3j2zeghYHAQCLcBGAs/s640/device.png "React Native Get Device Height Width on Button Click")](https://2.bp.blogspot.com/-3s72Ha578q4/XC7skslyGoI/AAAAAAAACSg/NVnlCq9rcC4c_1zVIiiPZP3j2zeghYHAQCLcBGAs/s1600/device.png)
  

## Get Device Height Width on Button Click In React Native :
In this tutorial we are going to display device screen width and height, when user clicks on button.  
  
**Step-1: ** Create a new react native project, if you don’t know [how to create a new project in react native just follow this tutorial](https://www.skptricks.com/2018/06/how-to-create-your-first-react-native-application.html).  
  
**Step-2:**  Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.  
  
**Step-3: ** Through react , react-native  packages import all required components.  

```
import React, { Component } from "react";  
import { Platform, StyleSheet, View, Text, Button, Dimensions } from "react-native";
```
  
**Step-4:** Inside the App class create a constructor and define the state inside the constructor block, where are capturing the width and height of the device screen.  

```
constructor() {  
super();  
this.state = { screenWidth: "", screenHeight: "" }  
}
```
  
**Step-5: ** inside the  **App ** class create function named as  **getScreenSize**. This function capture the device screen width & height and finally display the dimensions in screen.   

```
 getScreenSize = () => {  
const screenWidth = Math.round(Dimensions.get('window').width);  
const screenHeight = Math.round(Dimensions.get('window').height);  
this.setState({ screenWidth: screenWidth, screenHeight: screenHeight })  
}
```
  
**Step-6 : **  Implement render method and place below layout design inside the render block.  

```
 render() {  
return (  
<View style={styles.container}>  
<View style={{ marginTop: 150 }}>  
<Text style={styles.headerText}> Screen width : {this.state.screenWidth}</Text>  
<Text style={styles.headerText}>Screen height : {this.state.screenHeight}</Text>  
</View>  
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>  
<View style={[{ width: "40%", margin: 10 }]}>  
<Button  
              onPress={this.getScreenSize}  
              title="Get screen size"  
/>  
</View>  
</View>  
  
</View>  
);  
}
```
  
**Step-7 : ** Apply the below style sheet design.  

```
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
// justifyContent: 'center',  
//alignItems: 'center'  
},  
  headerText: {  
    fontSize: 20,  
    textAlign: "center",  
    margin: 10,  
    fontWeight: "bold"  
},  
});
```
  

## Complete Source Code for App.js 
Lets see the complete source code that helps to display device screen width and height, when user clicks on button in react native application  
  

```
/\*\*  
 \* Sample React Native App  
 \* https://github.com/facebook/react-native  
 \* @flow  
 \*/  
  
import React, { Component } from "react";  
import { Platform, StyleSheet, View, Text, Button, Dimensions } from "react-native";  
  
export default class App extends Component {  
  
  constructor() {  
super();  
this.state = { screenWidth: "", screenHeight: "" }  
}  
  
  getScreenSize = () => {  
const screenWidth = Math.round(Dimensions.get('window').width);  
const screenHeight = Math.round(Dimensions.get('window').height);  
this.setState({ screenWidth: screenWidth, screenHeight: screenHeight })  
}  
  
  
  render() {  
return (  
<View style={styles.container}>  
<View style={{ marginTop: 150 }}>  
<Text style={styles.headerText}> Screen width : {this.state.screenWidth}</Text>  
<Text style={styles.headerText}>Screen height : {this.state.screenHeight}</Text>  
</View>  
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>  
<View style={[{ width: "40%", margin: 10 }]}>  
<Button  
              onPress={this.getScreenSize}  
              title="Get screen size"  
/>  
</View>  
</View>  
  
</View>  
);  
}  
}  
  
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
// justifyContent: 'center',  
//alignItems: 'center'  
},  
  headerText: {  
    fontSize: 20,  
    textAlign: "center",  
    margin: 10,  
    fontWeight: "bold"  
},  
});
```
  
**Screenshot :**  

[![React Native Get Device Height Width on Button Click](https://2.bp.blogspot.com/-rOuRbOiFaLQ/XC7rDib-L-I/AAAAAAAACSQ/UfOw2pS_Tawca87Y6emLXGCkiKvljhM1ACLcBGAs/s400/Screenshot_1546578692.png "React Native Get Device Height Width on Button Click")](https://2.bp.blogspot.com/-rOuRbOiFaLQ/XC7rDib-L-I/AAAAAAAACSQ/UfOw2pS_Tawca87Y6emLXGCkiKvljhM1ACLcBGAs/s1600/Screenshot_1546578692.png)
  
  
This is all about **React Native Get Device Height Width on Button Click demo**. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.