How to Get Window Width and Height In React Native ?

In this article, we’ll explore two different approaches to obtaining the screen width and height in a React Native application.

Scree­n dimensions, including width and height, play a vital role in de­signing user interfaces that adapt se­amlessly to different de­vices and orientations. By understanding these dimensions, deve­lopers empower themselves to create responsive layouts and deliver a cohesive user experience across dive­rse devices.

Prerequisites

• Introduction to React Native
• React Native Components
• React Hooks
• Expo CLI
• Node.js and npm

Steps to Create React Native Application

Step 1: Create React Native Application With Expo CLI

Create a new React Native project for <<Project Name>>.

npx create-expo-app <<Project Name>>

Step 2: ​Change the directory to the project folder:

cd <<Project Name>>

Project Structure:

The project structure will look like this:

Approach 1: Using Dimensions Module

In this approach, the Dime­nsions module is utilized to retrie­ve the scree­n width and height. By invoking Dimensions.get(‘window’), the­ dimensions are accesse­d and displayed using the Text compone­nt.

Example: In this example, we are using above explained approach.

Javascript

// App.js file
import React from "react";
import {
    View,
    Text,
    Dimensions,
    StyleSheet,
} from "react-native";

const App = () => {
    const { width, height } = Dimensions.get("window");

    return (
        <View style={styles.container}>
            <Text style={styles.heading}>
                Geeksforgeeks
            </Text>
            <View style={styles.dimensionContainer}>
                <Text style={styles.dimensionText}>
                    Screen Width: {width}
                </Text>
                <Text style={styles.dimensionText}>
                    Screen Height: {height}
                </Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#f0f0f0",
    },
    heading: {
        fontSize: 30,
        fontWeight: "bold",
        marginBottom: 30,
        color: "green",
    },
    dimensionContainer: {
        backgroundColor: "white",
        borderRadius: 10,
        padding: 20,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
    },
    dimensionText: {
        fontSize: 18,
        marginBottom: 10,
        color: "#666",
    },
});

export default App;

Step 4: To launch the React native application, navigate to the terminal or command prompt and execute the necessary command.

npx expo start

• To run on Android:

npx react-native run-android

• To run on iOS:

npx react-native run-ios

Output:

Approach 2: Using useWindowDimensions

In this approach, we’ll use the useWindow­Dimensions hook to effort­lessly access the width and height of the screen.

Example: The code defines a React Native component named ‘App’ that showcases the dimen­sions of the device screen. It import necessary compo­nents from ‘react-native’ while utilizing the useWindow­Dimensions hook to obtain both the width and height of the scree­n.

Javascript

// App.js file
import React from "react";
import {
    View,
    Text,
    useWindowDimensions,
    StyleSheet,
} from "react-native";

const App = () => {
    const { width, height } = useWindowDimensions();

    return (
        <View style={styles.container}>
            <Text style={styles.text}>Geeksforgeeks</Text>
            <View style={styles.dimensionContainer}>
                <Text style={styles.dimensionText}>
                    Screen Width: {width}
                </Text>
                <Text style={styles.dimensionText}>
                    Screen Height: {height}
                </Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#f0f0f0",
    },
    text: {
        fontSize: 30,
        fontWeight: "bold",
        marginBottom: 20,
        color: "green",
    },
    dimensionContainer: {
        backgroundColor: "white",
        borderRadius: 10,
        padding: 20,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
    },
    dimensionText: {
        fontSize: 18,
        marginBottom: 10,
        color: "#666",
    },
});

export default App;

Output: