React Native Get Screen Height Example

React Native

Nicesnippets

23-05-2022


React Native Get Screen Height Example

Hi Guys,

This simple article demonstrates of react native get screen height example. if you want to see example of screen height in react native then you are a right place. We will look at example of how to get screen height in react native. we will help you to give example of react native dimensions 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...