From 67a83b751476da36191b720d5fa726637b3e8943 Mon Sep 17 00:00:00 2001
From: Bilal <72039733+simbolmina@users.noreply.github.com>
Date: Tue, 11 Jun 2024 14:57:23 +0300
Subject: [PATCH] docs: Improve useWindowDimensions documentation example

- Enhanced the example to demonstrate how to dynamically adjust UI element sizes based on font scale.
- Updated the description of fontScale to emphasize its use in making UI elements adaptable to font size changes, ensuring better readability and usability.
---
 docs/usewindowdimensions.md | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md
index ce754019bb4..425b019b9b5 100644
--- a/docs/usewindowdimensions.md
+++ b/docs/usewindowdimensions.md
@@ -17,10 +17,11 @@ const {height, width} = useWindowDimensions();
 
 ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
 import React from 'react';
-import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
+import { View, StyleSheet, Text, useWindowDimensions } from 'react-native';
 
 const App = () => {
-  const {height, width, scale, fontScale} = useWindowDimensions();
+  const { height, width, scale, fontScale } = useWindowDimensions();
+
   return (
     <View style={styles.container}>
       <Text style={styles.header}>Window Dimension Data</Text>
@@ -28,22 +29,39 @@ const App = () => {
       <Text>Width: {width}</Text>
       <Text>Font scale: {fontScale}</Text>
       <Text>Pixel ratio: {scale}</Text>
+
+      <View style={[styles.box, { height: 100 * fontScale, padding: 10 * fontScale }]}>
+        <Text style={[styles.boxText, { fontSize: 16 }]}>Dynamic Box</Text>
+      </View>
     </View>
   );
 };
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    padding: 16,
   },
   header: {
     fontSize: 20,
     marginBottom: 12,
   },
+  box: {
+    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 20,
+    borderRadius: 10,
+  },
+  boxText: {
+    color: '#333',
+  },
 });
 
 export default App;
+
 ```
 
 ## Properties
@@ -56,7 +74,9 @@ useWindowDimensions().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.
 
----
+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 indicates the current scale factor applied to the font sizes.
+
+Changing the font size percentage can be leveraged to dynamically adjust the sizes of UI elements, such as padding, margins, and container heights, to ensure a consistent and accessible user experience. By using the fontScale property, developers can make their applications more adaptable to users' preferences for larger or smaller text, enhancing readability and usability.
 
 ### `height`