React Native Get Device Height Width on Button Click

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);

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.

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 :

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.