CharlesStover / use-dimensions

A React hook for the React Native Dimensions API.

useDimensions

useDimensions is a React hook for the React Native Dimensions API.

Install

• npm install use-dimensions --save, or
• yarn add use-dimensions

Use

Screen and Window Dimensions

To get both screen and window dimensions, use the default export.

import useDimensions from 'use-dimensions';

export default function MyComponent() {
  const { screen, window } = useDimensions();
  return (
    <Text>
      a {screen.width}x{screen.height} screen{' '}
      inside a{' '}
      {window.width}x{window.height} window
    </Text>
  );
}

Screen Dimensions Only

To get the screen dimensions only, use the useScreenDimensions export.

import { useScreenDimensions } from 'use-dimensions';

export default function MyComponent() {
  const { height, width } = useScreenDimensions();
  return <Text>{width}x{height}</Text>;
}

Window Dimensions Only

To get the window dimensions only, use the useWindowDimensions export.

import { useWindowDimensions } from 'use-dimensions';

export default function MyComponent() {
  const { height, width } = useWindowDimensions();
  return <Text>{width}x{height}</Text>;
}