React Native: How to use Dimensions API in React Native?

1import { Dimensions, StyleSheet } from "react-native";
2
3const { width, height } = Dimensions.get("window");
4
5const styles = StyleSheet.create({
6  container: {
7    width: width,
8    height: height,
9  },
10  halfWidth: {
11    width: width / 2,
12  },
13});

1import { useEffect, useState } from "react";
2
3function ResponsiveComponent() {
4  const [dimensions, setDimensions] = useState(
5    Dimensions.get("window")
6  );
7
8  useEffect(() => {
9    const subscription = Dimensions.addEventListener(
10      "change",
11      ({ window }) => {
12        setDimensions(window);
13      }
14    );
15    return () => subscription?.remove();
16  }, []);
17
18  return (
19    <View style={{ width: dimensions.width }}>
20      <Text>Width: {dimensions.width}</Text>
21    </View>
22  );
23}

1import { useWindowDimensions } from 'react-native';
2
3function MyComponent() {
4  const { width, height } = useWindowDimensions();
5  return <Text>{width}x{height}</Text>;
6}