6
A collection of React hooks for using the dimensions of the screen, window, or b...
source link: https://reactnativeexample.com/a-collection-of-react-hooks-for-using-the-dimensions-of-the-screen-window-or-both/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Hooks
A collection of React hooks for using the dimensions of the screen, window, or both
May 17, 2021
1 min read
react-native-use-dimensions
This Node.js package is a collection of React hooks for using the dimensions of the screen, window, or both.
Installation
With Node.js installed, simply run the following command to add the package to your project.
npm install react-native-use-dimensions
Usage
Check out the examples below or check out the docs.
The package comes with three hooks:
- useScreenDimensions - screen dimensions
- useWindowDimensions - window dimensions, which can be separate from screen on Android
- useDimensions - screen and window dimensions
import React from "react";
import { Text } from "react-native";
import useDimensions, {
useScreenDimensions,
useWindowDimensions
} from "react-native-use-dimensions";
const ScreenDimensions = () => {
const { height, width } = useScreenDimensions();
const isLandscape = width > height;
return (
<Text>
{width}x{height}
Orientation: {isLandscape ? "Landscape" : "Portrait"}
</Text>
);
};
const WindowDimensions = () => {
const { height, width } = useWindowDimensions();
const isLandscape = width > height;
return (
<Text>
{width}x{height}
Orientation: {isLandscape ? "Landscape" : "Portrait"}
</Text>
);
};
const BothDimensions = () => {
const { screen, window } = useDimensions();
return (
<Text>
Screen: {screen.width}x{screen.height}
Window: {window.width}x{window.height}
</Text>
);
};
GitHub
Previous Post
Reactive forms for react and react native using hook
Next Post
Pinterest like masonry listview made in React Native
Subscribe to React Native Example for Android and iOS
Get the latest posts delivered right to your inbox
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK