How to get mobile width & height dimensions in React Native?

React native provides Dimensions API and useWindowDimensions() hook to get width & height size of Mobile Screen and Window, in React Native.

With this, you can calculate the dimensions of Screen and Window.

We can get the dimensions using these commands –

import { Dimensions } from 'react-native';

// Getting Dimensions of Window 👇 
const {width, height} = Dimensions.get('window')

// Getting Dimensions of Screen 👇 
const {width, height} = Dimensions.get('screen')

But getting the dimensions using this method is static. Suppose, you are using a foldable device then you need to know when the screen is folded and it’s size changed.

Using the above method will not change the value of width & height on folding of device. Although, if you call Dimensions.get('window') again then you will get the new values.

To handle this situation, you have 3 choices –

1. Call Dimensions.get('window') on each render of component. So that if the device is rotated, then the new size will take into effect.
2. You can use addEventListener() to listen to dimensions changes.
3. Use useWindowDimensions() hook.

Using a listener is messy because then you will need to remove the listener also, when the component is unmounted. That’s why we prefer to use useWindowDimensions() hook. Like this –

import { useWindowDimensions } from 'react-native';

const { height, width } = useWindowDimensions();

This hook will automatically update the values of height & width with the change in app window’s dimensions.

Code Example

import React, { useState, useEffect } from "react";
import { View, StyleSheet, Text, Dimensions, useWindowDimensions } from "react-native";

const App = () => {
  const windowDimen = useWindowDimensions();
  
  const window = Dimensions.get("window");
  const screen = Dimensions.get("screen");

  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.header}>
          Window Dimensions
        </Text>
        <Text>{JSON.stringify(window)}</Text>
      </View>
      
      <View>
        <Text style={styles.header}>
          Screen Dimensions
        </Text>
        <Text>{JSON.stringify(screen)}</Text>
      </View>

      <View>
        <Text style={styles.header}>
          useWindowDimensions() Hook
        </Text>
        <Text>{JSON.stringify(windowDimen)}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center"
  },
  header: {
    fontSize: 16,
    marginVertical: 10
  }
});

export default App;

Output –

In the above image you can see that the Dimension api works in both Android and iOS phones.

In the code we have used both the useWindowDimensions() hook as well as Dimensions api.

Live Demo