Get device screen height width on button click in React Native Tutorial from Scratch

If you want to get the device’s screen height, width on button click in react native then this tutorial shows you how you can get device’s screen height and width with complete source code from scratch.

React Native provides a very nice library named Dimensions , through this you can get device’ screen height and width easily. Dimensions  provides a get  method, which is used to get screen dimensions.

Now let’s get started.

Step #1: Create a fresh react native project, if you don’t know how to create a project in react native just follow this tutorial.

Step #2: Open your project in your favourite editor( Visual Studio Code, Sublime etc. ) and open index.android.js / index.ios.js  file. Remove all the code from this file, because we are going to start from scratch. 🙂

Step #3: Import all required components from react and react-native .

import React, { Component } from 'react';
import { AppRegistry, View, Dimensions, Button, StyleSheet } from 'react-native';

Step #4: Use get  method of Dimensions  library  to get width and height of device’ screen and store in two constants.

const device_width = Dimensions.get('window').width;
const device_height = Dimensions.get('window').height;

Explanation:

• Here we use const  to hold device’s screen width and height, you can use var  to hold width and height. I used const  because I don’t want to change the values of these device_width  and device_height constants.

Step #5: Render GUI with View , Buttons  and make required functions to alert device’s width and device’s height.

class App extends Component
{
  //Function used to alert device' width
  getWidth = () =>
  {
    alert("Device Width: " + device_width);
  }

  //Function used to alert device' height  
  getHeight = () =>
  {
    alert("Device Height: " + device_height);
  }
  
  render()
  {
    return(
      <View style = { styles.container }>
        <View style = { styles.button_holder }>
          <Button title = "Get Width" onPress = { this.getWidth }/>
        </View>
        <View style = { styles.button_holder }>
          <Button title = "Get Height" onPress = { this.getHeight }/>
        </View>
      </View>
    );
  }
}

Step #6: Implement styles for components to set custom design.

const styles = StyleSheet.create(
{
  container:
  {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 25
  },
  
  button_holder:
  {
    marginBottom: 25
  }
});

Explanation:

• paddingHorizontal  is a special property, which is used to set paddingLeft  and paddingRight . Using this single paddingHorizontal  property, you can set both paddingLeft  and paddingRight  property in a single statement. In our case, we gave paddingHorizontal: 25 . It means container takes padding 25  on both left and right side and buttons shows at the center of the screen.

Step #7: Register your app with AppRegistry .

AppRegistry.registerComponent('App', () => App);

Complete Source Code for index.android.js / index.ios.js:

import React, { Component } from 'react';
import { AppRegistry, View, Button, Dimensions, StyleSheet } from 'react-native';

const device_width = Dimensions.get('window').width;
const device_height = Dimensions.get('window').height;

class App extends Component
{
  getWidth = () =>
  {
    alert("Device Width: " + device_width);
  }
  
  getHeight = () =>
  {
    alert("Device Height: " + device_height);
  }
  
  render()
  {
    return(
      <View style = { styles.container }>
        <View style = { styles.button_holder }>
          <Button title = "Get Width" onPress = { this.getWidth }/>
        </View>
        <View style = { styles.button_holder }>
          <Button title = "Get Height" onPress = { this.getHeight }/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create(
{
  container:
  {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 25
  },
  
  button_holder:
  {
    marginBottom: 25
  }
});

AppRegistry.registerComponent('App', () => App);

Step #8: Run your app with react-native run-android  for android and react-native run-ios  for iOS devices.

• Output in iOS emulator:

• Output in Android emulator:

Feel free to comment and Enjoy… 🙂