docs: create useWindowDimensions as a separate page

docs/dimensions.md

@@ -3,6 +3,8 @@ id: dimensions
 title: Dimensions
 ---
 
+> [`useWindowDimensions`](useWindowDimensions) is the preffered API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
+
 ```jsx
 import {Dimensions} from 'react-native';
 ```
@@ -14,7 +16,7 @@ const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
 ```
 
-> Note: Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
+> Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
 
 If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
 
@@ -123,36 +125,6 @@ const styles = StyleSheet.create({
 
 <block class="endBlock syntax" />
 
-### React Native Hooks
-
-React native comes with `useWindowDimensions` which automatically updates the window size when screen size changes
-
-```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from "react";
-import { View, StyleSheet, Text, useWindowDimensions } from "react-native";
-
-export default function App() {
-  const window = useWindowDimensions();
-
-  return (
-    <View style={styles.container}>
-      <Text>{`Window Dimensions: height - ${window.height}, width - ${window.width}`}</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center"
-  }
-});
-```
-
-- You can also try [useDimensions](https://github.com/react-native-community/react-native-hooks#usedimensions) hook from [React native hooks](https://github.com/react-native-community/react-native-hooks) library which makes handling screen/window size changes much simpler.
-- [React Native Responsive Dimensions](https://github.com/DaniAkash/react-native-responsive-dimensions) also comes with responsive hooks.
-
 # Reference
 
 ## Methods

docs/usewindowdimensions.md

@@ -0,0 +1,76 @@
+---
+id: usewindowdimensions
+title: useWindowDimensions
+---
+
+```jsx
+import {useWindowDimensions} from 'react-native';
+```
+
+`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
+
+```jsx
+const windowWidth = useWindowDimensions().width;
+const windowHeight = useWindowDimensions().height;
+```
+## Example
+
+```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
+import React from "react";
+import { View, StyleSheet, Text, useWindowDimensions } from "react-native";
+
+export default function App() {
+  const window = useWindowDimensions();
+  return (
+    <View style={styles.container}>
+      <Text>{`Window Dimensions: height - ${window.height}, width - ${window.width}`}</Text>
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+```
+
+- The [useDimensions](https://github.com/react-native-community/react-native-hooks#usedimensions) hook from the community [React native hooks](https://github.com/react-native-community/react-native-hooks) library aims to make handling screen/window size changes easier to work with.
+- [React Native Responsive Dimensions](https://github.com/DaniAkash/react-native-responsive-dimensions) also comes with responsive hooks.
+
+## Properties
+
+### `fontScale`
+
+The scale of the font currently used. Some operating systems allow users to scale their font sizes larger or smaller for reading comfort. This property will let you know what is in effect.
+
+```jsx
+useWindowDimensions().fontScale;
+```
+
+### `height`
+
+The height in pixels of the window or screen your app occupies.
+
+```jsx
+useWindowDimensions().height;
+```
+
+### `scale`
+
+The ]pixel ratio of the device your app is running on. 
+
+```jsx
+useWindowDimensions().scale;
+```
+
+> A value of `1` indicates PPI/DPI of 96 (76 on some platforms). `2` indicates a Retina or high DPI display.
+
+### `width`
+
+The width in pixels of the window or screen your app occupies.
+
+```jsx
+useWindowDimensions().width;
+```

website/i18n/en.json

@@ -374,6 +374,9 @@
       "upgrading": {
         "title": "Upgrading to new React Native versions"
       },
+      "usewindowdimensions": {
+        "title": "useWindowDimensions"
+      },
       "using-a-listview": {
         "title": "Using List Views"
       },
@@ -3407,6 +3410,9 @@
       "version-0.61/version-0.61-debugging": {
         "title": "Debugging"
       },
+      "version-0.61/version-0.61-dimensions": {
+        "title": "Dimensions"
+      },
       "version-0.61/version-0.61-fast-refresh": {
         "title": "Fast Refresh"
       },
@@ -3416,6 +3422,9 @@
       "version-0.61/version-0.61-typescript": {
         "title": "Using TypeScript with React Native"
       },
+      "version-0.61/version-0.61-usewindowdimensions": {
+        "title": "useWindowDimensions"
+      },
       "version-0.7/version-0.7-pushnotificationios": {
         "title": "PushNotificationIOS"
       },

website/sidebars.json

@@ -134,6 +134,7 @@
       "timepickerandroid",
       "toastandroid",
       "transforms",
+      "usewindowdimensions",
       "vibration"
     ]
   }

website/versioned_docs/version-0.60/dimensions.md

@@ -4,6 +4,126 @@ title: Dimensions
 original_id: dimensions
 ---
 
+```jsx
+import {Dimensions} from 'react-native';
+```
+
+You can get the application window's width and height using below code:
+
+```jsx
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+```
+
+> Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
+
+If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
+
+### Example
+
+<div class="toggler">
+  <ul role="tablist" class="toggle-syntax">
+    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```SnackPlayer name=Dimensions
+import React, { useState, useEffect } from "react";
+import { View, StyleSheet, Text, Dimensions } from "react-native";
+
+const window = Dimensions.get("window");
+const screen = Dimensions.get("screen");
+
+export default function 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 (
+    <View style={styles.container}>
+      <Text>{`Window Dimensions: height - ${dimensions.window.height}, width - ${dimensions.window.width}`}</Text>
+      <Text>{`Screen Dimensions: height - ${dimensions.screen.height}, width - ${dimensions.screen.width}`}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=Dimensions
+import React, { Component } from "react";
+import { View, StyleSheet, Text, Dimensions } from "react-native";
+
+const window = Dimensions.get("window");
+const screen = Dimensions.get("screen");
+
+export default class App extends Component {
+  state = {
+    dimensions: {
+      window,
+      screen
+    }
+  };
+
+  onChange = ({ window, screen }) => {
+    this.setState({ dimensions: { window, screen } });
+  };
+
+  componentDidMount() {
+    Dimensions.addEventListener("change", this.onChange);
+  }
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener("change", this.onChange);
+  }
+
+  render() {
+    const { dimensions } = this.state;
+
+    return (
+      <View style={styles.container}>
+        <Text>{`Window Dimensions: height - ${dimensions.window.height}, width - ${dimensions.window.width}`}</Text>
+        <Text>{`Screen Dimensions: height - ${dimensions.screen.height}, width - ${dimensions.screen.width}`}</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+```
+
+<block class="endBlock syntax" />
+
 # Reference
 
 ## Methods