Функция useWindowDimensions

Функция useWindowDimensions вызывается внутри компонента. Она возвращает объект { width, height, scale, fontScale }, как Dimensions.get с аргументом 'window'. При повороте или смене окна компонент обновляется автоматически.

Синтаксис

const { width, height } = useWindowDimensions();

Пример

Давайте покажем ширину и высоту окна:

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

export default function App() {
	const { width, height } = useWindowDimensions();

	return (
		<View>
			<Text>{String(width)}</Text>
			<Text>{String(height)}</Text>
		</View>
	);
}

На экране две строки с текущими размерами окна.

Пример

Давайте сделаем колонку на узком окне и ряд на широком:

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

export default function App() {
	const { width } = useWindowDimensions();
	const row = width >= 600;

	return (
		<View style={{ flexDirection: row ? 'row' : 'column' }}>
			<Text>abcde</Text>
			<Text>12345</Text>
		</View>
	);
}

На экране тексты в ряд на широком окне и столбцом на узком. После поворота раскладка меняется сама.

Смотрите также

класс Dimensions,
который читает размер вне компонента
метод addEventListener,
который вручную слушает 'change'
класс PixelRatio,
который использует scale из ответа
компонент View,
которому задают flexDirection