Dimensions

Dimensions

Dimensions.get('window') and Dimensions.get('screen') return { width, height, scale, fontScale } in density-independent pixels. The docs say that on Android window is reduced by the status bar (when it is not translucent) and the navigation bar; with Android 16's enforced edge-to-edge drawing the two came out equal. Values change on rotation, on foldables and in multi-window mode, so read them on every render. In components, use the useWindowDimensions() hook, which re-renders on change; Dimensions.addEventListener('change') serves code outside React 7,897 .

src/info/Metrics.tsx: the window, the screen and a change listener (excerpt)TSX

  const { width, height, fontScale } = useWindowDimensions();    // re-renders on change
  useEffect(() => {
    const { window: w, screen: s } = { window: Dimensions.get('window'),
      screen: Dimensions.get('screen') };
    console.log(`window ${r(w.width)} x ${r(w.height)}, `
      + `screen ${r(s.width)} x ${r(s.height)}`);
    const sub = Dimensions.addEventListener('change', ({ window }) =>
      console.log(`change: window ${r(window.width)} x ${r(window.height)}`));
    return () => sub.remove();
  }, []);

r() rounds to one decimal. Widening the emulator's display with adb shell wm size 2000x2400, a quick way to mimic an unfolded phone, and then adb shell wm size reset, logged:

Output of 80

 LOG  window 411.4 x 914.3, screen 411.4 x 914.3
 LOG  change: window 761.9 x 914.3
 LOG  change: window 411.4 x 914.3

The Pixel 8 profile is 1080 x 2400 pixels at 420 dpi, so 411.4 x 914.3 dp. A value captured once in a StyleSheet would have stayed at 411.4 after the change; that is why the hook exists.

MENU