Skip to content

docs: Improve useWindowDimensions documentation example #4141

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

Closed
simbolmina wants to merge 1 commit into from
Closed

docs: Improve useWindowDimensions documentation example #4141

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 23 additions & 3 deletions docs/usewindowdimensions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,33 +17,51 @@ 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>
<Text>Height: {height}</Text>
<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
Expand All @@ -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`

Expand Down