React Native useWindowDimensions

Summary: in this tutorial, you will learn how to use the React Native useWindowDimensions hook to get the current window’s dimensions.

Introduction to the React native useWindowDimensions hook

In mobile app development, it is important to create a responsive design to ensure a great user experience across devices.

React Native supports the useWindowDimensions hook, which returns an object that contains the current width and height of the window. Based on this information, you can create flexible layouts.

The following example shows how to use the useWindowDimension hook:

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

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
  },
});

export default App;Code language: JavaScript (javascript)

Output:

How it works.

First, import the useWindowDimension hook from the react-native library:

import { View, Text, StyleSheet, useWindowDimensions } from 'react-native';Code language: JavaScript (javascript)

Second, call the useWindowDimensions() hook and get the width and height of the window:

const { width, height } = useWindowDimensions();Code language: JavaScript (javascript)

Third, display the width and height of the window on the screen:

<View style={styles.container}>
   <Text style={styles.text}>Width: {width}</Text>
   <Text style={styles.text}>Height: {height}</Text>
</View>Code language: HTML, XML (xml)

The following example uses the useWindowDimensions hook to create a response layout that changes the font size and background color based on the window’s width:

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

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

  const isLargeScreen = width > 600;

  return (
    <View style={[styles.container, isLargeScreen ? styles.largeScreen : styles.smallScreen]}>
      <Text style={[styles.text, isLargeScreen ? styles.largeText : styles.smallText]}>
        This is a {isLargeScreen ? 'large' : 'small'} screen.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  largeScreen: {
    backgroundColor: 'lightblue',
  },
  smallScreen: {
    backgroundColor: 'lightgreen',
  },
  text: {
    textAlign: 'center',
  },
  largeText: {
    fontSize: 24,
  },
  smallText: {
    fontSize: 16,
  },
});

export default App;
Code language: JavaScript (javascript)

Output:

How it works.

First, use the useWindowDimension hook to get the current window’s width:

const { width } = useWindowDimensions();Code language: JavaScript (javascript)

Second, create a variable that returns true if the width is greater than 600:

const isLargeScreen = width > 600;Code language: JavaScript (javascript)

Third, apply a different background and bigger font size based on the isLargeScreen‘s value:

<View style={[styles.container, isLargeScreen ? styles.largeScreen : styles.smallScreen]}>
   <Text style={[styles.text, isLargeScreen ? styles.largeText : styles.smallText]}>
       This is a {isLargeScreen ? 'large' : 'small'} screen.
   </Text>
</View>Code language: HTML, XML (xml)

Summary

• Use the React Native useWindowDimensions hook to get the current window’s dimensions.