import { Dimensions } from 'react-native';
console.log({
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
})
import React, { useState, useEffect } from "react";
import { View, StyleSheet, Text, Dimensions } from "react-native";
const window = Dimensions.get("window");
const screen = Dimensions.get("screen");
const App = () => {
const [dimensions, setDimensions] = useState({ window, screen });
const onChange = ({ window, screen }) => {
setDimensions({ window, screen });
};
useEffect(() => {
Dimensions.addEventListener("change", onChange);
return () => {
Dimensions.removeEventListener("change", onChange);
};
});
return (
{<code>Window Dimensions: height - ${dimensions.window.height}, width - ${dimensions.window.width}}
{Screen Dimensions: height - ${dimensions.screen.height}, width - ${dimensions.screen.width}}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
});
export default App;
import { useWindowDimensions } from 'react-native';
const { height, width } = useWindowDimensions();
/* useWindowDimensions automatically updates
all of its values when screen size or font scale changes. */