A zero-dependency responsive scaling hook for React Native and Expo. Built-in support for tablets, TVs, and any screen size.
npm install react-native-scaleitA minimal, powerful responsive scaling hook system for React Native and Expo.
Scale sizes, fonts, spacing, icons, and more — with zero dependencies.
---
- 📱 Supports both Android & iOS
- ⚖️ Device-aware scaling (width, height, font)
- 🎨 Built-in design tokens (spacing, fontSize, radius, etc.)
- 🚫 No external dependencies
---
``bash`
npm install react-native-scaleit
`tsx
import { useResponsive, useTokens } from 'react-native-scaleit';
const MyComponent = () => {
const { scale, fontScale } = useResponsive();
const { spacing, fontSize } = useTokens();
return (
);
};
`
Returns helpers:
- scale(size)verticalScale(size)
- moderateScale(size, factor = 0.5)
- fontScale(size)
- screen.width
- , screen.heightplatformSelect(iosVal, androidVal)
-
---
Returns:
`ts`
{
spacing: { xs, sm, md, lg, xl },
radius: { sm, md, lg, xl, round },
fontSize: { xs, sm, md, lg, xl, xxl },
iconSize: { sm, md, lg }
}
If you're already using your own design system with predefined tokens (like spacing.md, fontSize.lg, etc.), you can still use react-native-scaleit to make your values responsive — without replacing your tokens.
---
`tsx
import { useResponsive } from 'react-native-scaleit';
import { myTokens } from '@/theme/tokens'; // your own tokens
const MyComponent = () => {
const { scale, fontScale } = useResponsive();
const padding = scale(myTokens.spacing.md);
const fontSize = fontScale(myTokens.fontSize.sm);
return (
);
};
`
`ts
// theme/useScaledTokens.ts
import { useResponsive } from 'react-native-scaleit';
import { myTokens } from './tokens';
export const useScaledTokens = () => {
const { scale, fontScale } = useResponsive();
return {
spacing: {
sm: scale(myTokens.spacing.sm),
md: scale(myTokens.spacing.md),
lg: scale(myTokens.spacing.lg),
},
fontSize: {
sm: fontScale(myTokens.fontSize.sm),
md: fontScale(myTokens.fontSize.md),
},
};
};
`
Now use it like this:
`tsx
const { spacing, fontSize } = useScaledTokens();
`
and fontScale() during theme creation:`ts
import { scale, fontScale } from 'react-native-scaleit';export const theme = {
spacing: {
sm: scale(8),
md: scale(16),
lg: scale(24),
},
fontSize: {
body: fontScale(14),
title: fontScale(20),
},
};
`📺 Tablet & TV Support
react-native-scaleit automatically adjusts scaling for larger screens:| Device Type | Spacing/Radius | Font Size Scaling |
|-------------|---------------------|------------------------|
| Phone | 1× (base) | 1× (base) |
| Tablet/iPad | 1.2× | 1.2× |
| TV | 1.5× | 1.6× |
---
$3
Device type is detected using screen dimensions and aspect ratio — no external libraries needed.
$3
`tsx
import { useTokens } from 'react-native-scaleit';const { spacing, fontSize } = useTokens();
Looks great on phones, tablets, and TVs!
`$3
`tsx
import { useResponsive } from 'react-native-scaleit';const { deviceType, scale, fontScale } = useResponsive();
Hello from {deviceType}!
``