useWindowDimensions

function useWindowDimensions(): {
  width: number;
  height: number;
  scale: number;
  fontScale: number;
}

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

function ResponsiveComponent() {
  const { width, height, scale, fontScale } = useWindowDimensions();

  return (
    <View>
      <Text>Window Width: {width}</Text>
      <Text>Window Height: {height}</Text>
      <Text>Pixel Density: {scale}x</Text>
      <Text>Font Scale: {fontScale}</Text>
    </View>
  );
}

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

function ResponsiveLayout() {
  const { width } = useWindowDimensions();

  // Switch between mobile and tablet layouts
  const isTablet = width >= 768;

  return (
    <View style={isTablet ? styles.tabletContainer : styles.mobileContainer}>
      {/* Your content */}
    </View>
  );
}

const styles = StyleSheet.create({
  mobileContainer: {
    flexDirection: 'column',
    padding: 16,
  },
  tabletContainer: {
    flexDirection: 'row',
    padding: 24,
  },
});

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

function GridView({ data }: { data: any[] }) {
  const { width } = useWindowDimensions();

  // Calculate number of columns based on width
  const getNumColumns = () => {
    if (width >= 1024) return 4;
    if (width >= 768) return 3;
    if (width >= 480) return 2;
    return 1;
  };

  const numColumns = getNumColumns();
  const itemWidth = width / numColumns - 16;

  return (
    <FlatList
      data={data}
      numColumns={numColumns}
      key={numColumns} // Force re-render on column change
      renderItem={({ item }) => (
        <View style={{ width: itemWidth, margin: 8 }}>
          {/* Item content */}
        </View>
      )}
    />
  );
}

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

function OrientationAware() {
  const { width, height } = useWindowDimensions();

  const isPortrait = height > width;
  const isLandscape = width > height;

  return (
    <View>
      <Text>Orientation: {isPortrait ? 'Portrait' : 'Landscape'}</Text>
      <View
        style={{
          flexDirection: isPortrait ? 'column' : 'row',
        }}
      >
        {/* Layout that adapts to orientation */}
      </View>
    </View>
  );
}

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

function AccessibleText() {
  const { fontScale } = useWindowDimensions();

  // Adjust layout based on user's font size preferences
  const baseFontSize = 16;
  const scaledFontSize = baseFontSize * fontScale;

  return (
    <Text style={[styles.text, { fontSize: baseFontSize }]}>
      This text respects system font scaling ({fontScale.toFixed(2)}x)
    </Text>
  );
}

const styles = StyleSheet.create({
  text: {
    // fontSize will be scaled by the system automatically
    // but you can use fontScale for layout adjustments
  },
});

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

function ResponsiveImage({ source }: { source: any }) {
  const { width, scale } = useWindowDimensions();

  // Calculate optimal image size
  const imageWidth = Math.min(width * 0.9, 600);
  const imageHeight = imageWidth * 0.75; // 4:3 aspect ratio

  // Use scale to load appropriate resolution
  const shouldLoadHighRes = scale >= 2;

  return (
    <View style={{ alignItems: 'center' }}>
      <Image
        source={source}
        style={{ width: imageWidth, height: imageHeight }}
        resizeMode="cover"
      />
    </View>
  );
}

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

function CenteredModal({ visible, children }: { visible: boolean; children: React.ReactNode }) {
  const { width, height } = useWindowDimensions();

  const modalWidth = Math.min(width * 0.9, 500);
  const modalHeight = Math.min(height * 0.8, 600);

  return (
    <Modal visible={visible} transparent>
      <View style={styles.backdrop}>
        <View
          style={[
            styles.modalContent,
            {
              width: modalWidth,
              height: modalHeight,
            },
          ]}
        >
          {children}
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 20,
  },
});

// ❌ Old way - requires manual subscription management
import { Dimensions, useEffect, useState } from 'react-native';

function OldWay() {
  const [dimensions, setDimensions] = useState(Dimensions.get('window'));

  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setDimensions(window);
    });
    return () => subscription.remove();
  }, []);

  return <View style={{ width: dimensions.width }} />;
}

// ✅ New way - hook handles everything
function NewWay() {
  const { width } = useWindowDimensions();
  return <View style={{ width }} />;
}