Diferencias entre Dimensions.get('window') y useWindowDimensions()

1. Dimensions.get('window'):

   • Es un método estático de la API Dimensions.
   • Captura las dimensiones iniciales de la ventana (width y height) en el momento en que se invoca.
   • Limitación: No actualiza sus valores automáticamente si el dispositivo se rota o cambia de tamaño. Es necesario volver a invocar Dimensions.get('window') para obtener los nuevos valores.

   Ejemplo:

   const dimensions = Dimensions.get('window');
   const { width, height } = dimensions;
   

2. useWindowDimensions():

   • Es un custom hook que proporciona acceso dinámico a las dimensiones actuales de la ventana.
   • Se actualiza automáticamente al rotar el dispositivo o al cambiar de tamaño la pantalla.
   • Ventaja: No requiere lógica adicional para detectar cambios de orientación.

   Ejemplo:

   const { width, height } = useWindowDimensions();
   

Ventajas de useWindowDimensions()

• Reactivo: Actualiza automáticamente las dimensiones en tiempo real.
• Más limpio: No requiere agregar event listeners para manejar cambios en la orientación o tamaño.

Ejemplo: Caja con el 50% del Ancho de la Pantalla

A continuación, implementamos un ejemplo práctico donde una caja toma el 50% del ancho de la pantalla. Utilizaremos el spread de estilos (...styles.purpleBox) y sobrescribiremos el ancho con width: width * 0.5.

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

export const DimensionScreen = () => {
  // Hook para obtener dimensiones dinámicas
  const { width, height } = useWindowDimensions();

  return (
    <View style={styles.container}>
      {/* Caja dinámica */}
      <View
        style={{
          ...styles.purpleBox, // Spread de estilos base
          width: width * 0.5,  // Sobrescribir el ancho dinámicamente
        }}
      />
      {/* Mostrar dimensiones */}
      <Text style={styles.text}>
        w: {width}, h: {height}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e8e8e8',
    justifyContent: 'center',
    alignItems: 'center',
  },
  purpleBox: {
    height: 100,
    backgroundColor: 'purple',
    marginBottom: 20,
  },
  text: {
    fontSize: 16,
  },
});

export default DimensionScreen;

Explicación del Código

1. Uso de useWindowDimensions():

   • El hook proporciona las dimensiones actuales de la ventana (width y height).
   • Estas dimensiones se actualizan automáticamente al rotar el dispositivo.

2. Spread y Sobrescritura de Estilos:

   • Se utilizan los estilos base (...styles.purpleBox) para mantener la consistencia.
   • Se sobrescribe el ancho (width) para ajustarlo dinámicamente al 50% del ancho de la pantalla.

3. Texto de Dimensiones:

   • Se muestra en tiempo real el ancho y alto de la pantalla debajo de la caja morada.

Resultado Esperado

• La caja morada ocupa el 50% del ancho de la pantalla, independientemente de su orientación.
• Al rotar el dispositivo, la caja se redimensiona automáticamente gracias a useWindowDimensions().