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 ( Window Dimension Data @@ -28,22 +29,39 @@ const App = () => { Width: {width} Font scale: {fontScale} Pixel ratio: {scale} + + + Dynamic Box + ); }; + 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`