How to Get Screen Height in React Native?

May 23, 2022 . Admin

Hi Guys,

This tutorial will provide an example of how to get screen height in react native. This post will give you a simple example of screen height in react native. you can see react native dimensions example. This article will give you a simple example of react native get screen height example.

To get the screen height in React Native, we can use the Dimension object. Then we can use the width and height properties to get the width and height of the screen.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ScreenHeight
Step 2: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View, Dimensions} from 'react-native';

const Height = Dimensions.get("screen").height;

const App = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.width}>Screen Height: {Height} </Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    width: {
        fontSize:22,
        backgroundColor:'green',
        padding:10,
        color:'white',
        borderRadius:10,
    }
});

export default App;
Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...

#React Native