From ffa4254a28c9089788bc99c1b3070f1bcb24785e Mon Sep 17 00:00:00 2001 From: simbolmina Date: Tue, 11 Jun 2024 15:10:13 +0300 Subject: [PATCH 01/11] docs: Improve useWindowDimensions documentation example --- docs/usewindowdimensions.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index ce754019bb4..d0d9931845d 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -28,6 +28,10 @@ const App = () => { Width: {width} Font scale: {fontScale} Pixel ratio: {scale} + + + Dynamic Box + ); }; @@ -56,6 +60,8 @@ 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. +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` From 741f6b849bc86330dc8095ea789c3b8b0707deab Mon Sep 17 00:00:00 2001 From: simbolmina Date: Tue, 11 Jun 2024 15:16:11 +0300 Subject: [PATCH 02/11] fix link error --- docs/usewindowdimensions.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index d0d9931845d..85d5a2b0d6b 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -29,12 +29,21 @@ const App = () => { Font scale: {fontScale} Pixel ratio: {scale} - + Dynamic Box ); }; + const styles = StyleSheet.create({ container: { flex: 1, @@ -48,6 +57,7 @@ const styles = StyleSheet.create({ }); export default App; + ``` ## Properties From e27703733172c9e318e14fc8c50a312b941d5b7e Mon Sep 17 00:00:00 2001 From: simbolmina Date: Tue, 11 Jun 2024 15:21:04 +0300 Subject: [PATCH 03/11] Remove unnecessary lines for lint --- docs/usewindowdimensions.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index 85d5a2b0d6b..de943901f9c 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -28,14 +28,10 @@ const App = () => { Width: {width} Font scale: {fontScale} Pixel ratio: {scale} - Dynamic Box @@ -57,7 +53,6 @@ const styles = StyleSheet.create({ }); export default App; - ``` ## Properties From 44e0134ff24a69841615b9b2d9178e45db4e859f Mon Sep 17 00:00:00 2001 From: simbolmina Date: Tue, 11 Jun 2024 15:30:40 +0300 Subject: [PATCH 04/11] add more example and fix prettier error --- docs/usewindowdimensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index de943901f9c..6d1706c222a 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -34,7 +34,7 @@ const App = () => { { height: 100 * fontScale, padding: 10 * fontScale }, ]} > - Dynamic Box + Dynamic Box ); From 02d7cefda0f6e2d9b5a03ba88b185633db222324 Mon Sep 17 00:00:00 2001 From: simbolmina Date: Tue, 11 Jun 2024 15:34:14 +0300 Subject: [PATCH 05/11] fix lint error --- docs/usewindowdimensions.md | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index 6d1706c222a..b082983d8f4 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -17,10 +17,10 @@ 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 ( Window Dimension Data @@ -28,13 +28,8 @@ const App = () => { Width: {width} Font scale: {fontScale} Pixel ratio: {scale} - - Dynamic Box + + Dynamic Box ); From 8a1f19a3913a31b0881ed1c31ad6be20df3439e7 Mon Sep 17 00:00:00 2001 From: simbolmina Date: Tue, 11 Jun 2024 15:38:24 +0300 Subject: [PATCH 06/11] fix lint error --- docs/usewindowdimensions.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index b082983d8f4..82b1e964f2f 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -16,8 +16,8 @@ const {height, width} = useWindowDimensions(); ## Example ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android -import React from 'react'; -import { View, StyleSheet, Text, useWindowDimensions } from 'react-native'; +import React from "react"; +import { View, StyleSheet, Text, useWindowDimensions } from "react-native"; const App = () => { const { height, width, scale, fontScale } = useWindowDimensions(); @@ -38,8 +38,8 @@ const App = () => { const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: 'center', - alignItems: 'center', + justifyContent: "center", + alignItems: "center", }, header: { fontSize: 20, From 0cf2267e5c4ff08427c85754039e4e86c503608e Mon Sep 17 00:00:00 2001 From: simbolmina Date: Tue, 11 Jun 2024 15:43:44 +0300 Subject: [PATCH 07/11] remove double quotes and spaces from example --- docs/usewindowdimensions.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index 82b1e964f2f..d5c344aebbd 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -16,11 +16,11 @@ const {height, width} = useWindowDimensions(); ## Example ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android -import React from "react"; -import { View, StyleSheet, Text, useWindowDimensions } from "react-native"; +import React from 'react'; +import {View, StyleSheet, Text, useWindowDimensions} from 'react-native'; const App = () => { - const { height, width, scale, fontScale } = useWindowDimensions(); + const {height, width, scale, fontScale} = useWindowDimensions(); return ( Window Dimension Data @@ -28,8 +28,8 @@ const App = () => { Width: {width} Font scale: {fontScale} Pixel ratio: {scale} - - Dynamic Box + + Dynamic Box ); @@ -38,8 +38,8 @@ const App = () => { const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: "center", - alignItems: "center", + justifyContent: 'center', + alignItems: 'center', }, header: { fontSize: 20, From 4d8883eb02b32ffefa80130460c75daf88fcccd1 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 12 Oct 2026 16:21:21 +0200 Subject: [PATCH 08/11] fix missing import after rebase --- docs/usewindowdimensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index 98a91170235..353dc9f58a4 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -16,7 +16,7 @@ const {height, width} = useWindowDimensions(); ## Example ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android -import {StyleSheet, Text, useWindowDimensions} from 'react-native'; +import {StyleSheet, Text, View, useWindowDimensions} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { From a90a1ac1bfc991e057779b18fcaca4a50bafd6fa Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 12 Oct 2026 16:52:59 +0200 Subject: [PATCH 09/11] example tweaks, put font scale in note box --- docs/usewindowdimensions.md | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index 353dc9f58a4..af6692778be 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -25,11 +25,17 @@ const App = () => { Window Dimension Data - Height: {height} - Width: {width} - Font scale: {fontScale} - Pixel ratio: {scale} - + + Height: {height} + Width: {width} + Font scale: {fontScale} + Pixel ratio: {scale} + + Dynamic Box @@ -42,11 +48,15 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', alignItems: 'center', + gap: 12, }, header: { fontSize: 20, - marginBottom: 12, }, + box: { + minWidth: 100, + backgroundColor: '#06bcee', + } }); export default App; @@ -62,7 +72,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. +:::note 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. +::: --- From 6d6d6f79c5b2ddc69727d305864e4d17ff0b4250 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 12 Oct 2026 16:56:53 +0200 Subject: [PATCH 10/11] tweak base scale values --- docs/usewindowdimensions.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index af6692778be..9b38f6b4125 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -1,4 +1,4 @@ ---- +image--- id: usewindowdimensions title: useWindowDimensions --- @@ -32,8 +32,8 @@ const App = () => { Pixel ratio: {scale} Dynamic Box From ee2f7c1fd80c25e4661df66424038b645644af32 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 12 Oct 2026 17:05:38 +0200 Subject: [PATCH 11/11] fix example lint --- docs/usewindowdimensions.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index 9b38f6b4125..a34784eb0d4 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -1,4 +1,4 @@ -image--- +--- id: usewindowdimensions title: useWindowDimensions --- @@ -31,11 +31,12 @@ const App = () => { Font scale: {fontScale} Pixel ratio: {scale} - + Dynamic Box @@ -56,7 +57,7 @@ const styles = StyleSheet.create({ box: { minWidth: 100, backgroundColor: '#06bcee', - } + }, }); export default App;