
# useDimensions
Measures the screen dimensions and status bar height.

## Import

```tsx
import { useDimensions } from '@coinbase/cds-mobile/hooks/useDimensions'
```

## Examples

### Basic usage

```tsx
function Example() {
  const { screenWidth, screenHeight, statusBarHeight } = useDimensions();

  return (
    <Box backgroundColor="bgAlternate" padding={3} borderRadius={300} width="100%">
      <VStack gap={2}>
        <TextHeadline>
          Screen dimensions: {screenWidth}x{screenHeight}
        </TextHeadline>
        <TextHeadline>Status bar height: {statusBarHeight}px</TextHeadline>
      </VStack>
    </Box>
  );
}
```

### With Safe Area Layout

```tsx
function Example() {
  const { screenHeight, statusBarHeight } = useDimensions();
  const contentHeight = screenHeight - statusBarHeight;

  return (
    <Box backgroundColor="bgAlternate" height={contentHeight} paddingTop={statusBarHeight}>
      <TextHeadline>Content below status bar</TextHeadline>
    </Box>
  );
}
```


