Dimensions en React Native: Obtener el Tamaño de la Pantalla

  ¿Qué es Dimensions y para qué se usa?

Dimensions, es un módulo de utilidad de React Native, se utiliza en para obtener el tamaño de la pantalla del dispositivo, lo cual es útil para crear interfaces adaptables y dinámicas que se ajusten a diferentes tamaños de pantalla.

Sirve para obtener el tamaño de la pantalla del dispositivo (ancho y alto) en píxeles independientes del dispositivo (dp).

  Dimensions

Dimensions, no es un componente en React Native. Es un módulo o API que proporciona utilidades para obtener información sobre las dimensiones de la pantalla.

Ejemplo básico de Dimensions

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

const App = () => {
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

return (
    <View style={styles.container}>
      <Text style={styles.text}>Anchura de la pantalla: {screenWidth.toFixed(0)} px</Text>
      <Text style={styles.text}>Altura de la pantalla: {screenHeight.toFixed(0)} px</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 18,
    marginBottom: 10,
  },
});

export default App;
  Nota

Dimensions.get() acepta:

  • ‘window’: Tamaño del área visible de la aplicación.
  • ‘screen’: Tamaño total de la pantalla del dispositivo (incluye barra de estado, etc.).

Estructura básica de Dimensions

Dimensions proporciona métodos que permiten obtener las dimensiones de la pantalla del dispositivo, como el ancho (width) y la altura (height).

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

const App = () => {
const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);
const [screenHeight, setScreenHeight] = useState(Dimensions.get('window').height);

useEffect(() => {
  const onChange = ({ window }) => {
    setScreenWidth(window.width);
    setScreenHeight(window.height);
  };

  Dimensions.addEventListener('change', onChange);

  return () => {
    Dimensions.removeEventListener('change', onChange);
  };
}, []);

return (
  <View style={styles.container}>
    <Text>Anchura de la pantalla: {screenWidth}</Text>
    <Text>Altura de la pantalla: {screenHeight}</Text>
  </View>
);
};

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

export default App;

Ejemplo de uso de Dimensions en un componente

Este componente crea una cuadrícula responsive usando Flexbox.
Muestra cajas de ancho dinámico (mitad de pantalla) que se ajustan según el tamaño del dispositivo.
flexWrap: 'wrap' permite que las cajas bajen de línea si no caben horizontalmente.

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

const screenWidth = Dimensions.get('window').width;

export default FlexboxResponsive = () => {
return (
  <View style={styles.container}>
    <View style={styles.box} />
    <View style={styles.box} />
    <View style={styles.box} />
    <View style={styles.box} />
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap', // Permite que bajen a la siguiente línea si no caben
    justifyContent: 'space-between',
    padding: 20,
  },
  box: {
    width: screenWidth / 2 - 30, // Mitad de la pantalla menos márgenes
    height: 100,
    backgroundColor: '#4CAF50',
    marginBottom: 15,
    borderRadius: 5,
  },
});


  Nota

Dimensions se usa para obtener el ancho de la pantalla del dispositivo (Dimensions.get('window').width) y así calcular dinámicamente el ancho de cada caja (box) para que se ajusten de forma responsive, sin importar el tamaño del dispositivo.

box: { width: screenWidth / 2 - 30 }:

  • screenWidth: representa el ancho de la pantalla del dispositivo.
  • / 2: divide el ancho de la pantalla en dos partes iguales.
  • - 30: resta un margen de 30 píxeles para crear espacio entre las cajas. Esta expresión se usa para calcular el ancho de cada caja en un diseño responsive:
  • screenWidth / 2: divide el ancho de la pantalla en dos partes iguales.

Propiedades más comunes de Dimensions

  • Dimensions.get('window'): Devuelve las dimensiones de la ventana actual (es decir, el área visible de la pantalla).
  • Dimensions.get('screen'): Devuelve las dimensiones de la pantalla completa del dispositivo, que puede incluir la barra de estado y la barra de navegación (depende del dispositivo y el sistema operativo).
  • window.width y window.height: Obtienen el ancho y la altura de la ventana visible.

🚀 Escuchar cambios en las dimensiones

Es posible que desees escuchar cambios en las dimensiones de la pantalla, por ejemplo, si el dispositivo cambia de orientación. Para hacer esto, puedes usar Dimensions.addEventListener().

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

const App = () => {
const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);
const [screenHeight, setScreenHeight] = useState(Dimensions.get('window').height);

useEffect(() => {
  const onChange = ({ window }) => {
    setScreenWidth(window.width);
    setScreenHeight(window.height);
  };

  Dimensions.addEventListener('change', onChange);

  return () => {
    Dimensions.removeEventListener('change', onChange);
  };
}, []);

return (
  <View style={styles.container}>
    <Text>Anchura de la pantalla: {screenWidth}</Text>
    <Text>Altura de la pantalla: {screenHeight}</Text>
  </View>
);
};

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

export default App;
  Resumen

Dimensions es una herramienta útil para obtener las dimensiones de la pantalla del dispositivo en React Native. Te permite adaptar el diseño de la aplicación a diferentes tamaños de pantalla y orientaciones, mejorando la experiencia de usuario. Además, puedes escuchar cambios en las dimensiones, como cuando el usuario cambia la orientación de su dispositivo.