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.

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.

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

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

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

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

8. Create custom Style sheet class.

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

Screenshot in iOS mobile phone :

Screenshot in Android mobile phone device:

Get Device Height Width

2 Comments

  1. You don’t need to go through all this effort. Simply create both dimensions like
    const { height, width } = Dimensions.get(‘screen’);
    Then assign them wherever you need them like

Leave a Reply

Your email address will not be published. Required fields are marked *