Skip to content

docs: Improve useWindowDimensions documentation example #4142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Simek merged 12 commits into from
Oct 12, 2026
Merged

docs: Improve useWindowDimensions documentation example #4142

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ffa4254
docs: Improve useWindowDimensions documentation example
simbolmina Jun 11, 2024
741f6b8
fix link error
simbolmina Jun 11, 2024
e277037
Remove unnecessary lines for lint
simbolmina Jun 11, 2024
44e0134
add more example and fix prettier error
simbolmina Jun 11, 2024
02d7cef
fix lint error
simbolmina Jun 11, 2024
8a1f19a
fix lint error
simbolmina Jun 11, 2024
0cf2267
remove double quotes and spaces from example
simbolmina Jun 11, 2024
6d5584d
Merge branch 'main' into main
Simek Oct 12, 2026
4d8883e
fix missing import after rebase
Simek Oct 12, 2026
a90a1ac
example tweaks, put font scale in note box
Simek Oct 12, 2026
6d6d6f7
tweak base scale values
Simek Oct 12, 2026
ee2f7c1
fix example lint
Simek Oct 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 25 additions & 6 deletions docs/usewindowdimensions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -25,23 +25,38 @@ const App = () => {
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<Text style={styles.header}>Window Dimension Data</Text>
<Text>Height: {height}</Text>
<Text>Width: {width}</Text>
<Text>Font scale: {fontScale}</Text>
<Text>Pixel ratio: {scale}</Text>
<View>
<Text>Height: {height}</Text>
<Text>Width: {width}</Text>
<Text>Font scale: {fontScale}</Text>
<Text>Pixel ratio: {scale}</Text>
</View>
<View
style={{
width: 100 * fontScale,
padding: 16 * fontScale,
...styles.box,
}}>
<Text style={{fontSize: 14 / fontScale}}>Dynamic Box</Text>
</View>
</SafeAreaView>
</SafeAreaProvider>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
gap: 12,
},
header: {
fontSize: 20,
marginBottom: 12,
},
box: {
minWidth: 100,
backgroundColor: '#06bcee',
},
});

Expand All @@ -58,6 +73,10 @@ 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.
:::

---

### `height`
Expand Down
Loading