Skip to content

dawsonbooth/react-native-use-dimensions

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
react-native-use-dimensions

npm version downloads build status license

Description

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:

  1. useScreenDimensions - screen dimensions
  2. useWindowDimensions - window dimensions, which can be separate from screen on Android
  3. 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>
  );
};

License

This software is released under the terms of MIT license.

About

A collection of React hooks for using the dimensions of the screen, window, or both

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published