@doj/react-native-responsive-kit provides simple, lightweight utilities to build truly responsive and consistent React Native apps across all device sizes. Easily scale layouts, fonts, and components without worrying about different screen dimensions or p
npm install @doj/react-native-responsive-kitA lightweight, dynamic utility kit for building responsive and consistent designs across all devices in React Native.
Includes utilities for screen width, screen height, status bar height, responsive sizes, spacing, gaps, font sizes, and hooks for real-time updates.
---
- š± Responsive width and height helpers
- š Responsive text and element sizing (rs)
- š Always up-to-date screen dimensions
- šÆ Consistent spacing and gap utilities
- š” Predefined responsive font sizes
- ā»ļø useSizes() hook to dynamically track screen changes (rotation, resizing)
- š”ļø Safe and type-friendly
---
``bash`
npm install @doj/react-native-responsive-kit
or
`bash`
yarn add @doj/react-native-responsive-kit
---
`tsx`
import {
wp,
hp,
rs,
sizes,
spacing,
gap,
fontSizes,
useSizes,
} from '@doj/react-native-responsive-kit';
---
`tsx
import { wp, hp } from '@doj/react-native-responsive-kit';
width: wp(80), // 80% of screen width
height: hp(20), // 20% of screen height
}}
/>;
`
---
`tsx
import { rs } from '@doj/react-native-responsive-kit';
`
---
`tsx
import { sizes } from '@doj/react-native-responsive-kit';
console.log(sizes.screenWidth); // current device screen width
console.log(sizes.screenHeight); // current device screen height
console.log(sizes.statusBarHeight); // current status bar height
`
---
`tsx
import { spacing } from '@doj/react-native-responsive-kit';
padding: spacing.md,
marginBottom: spacing.lg,
}}
/>;
`
| Name | Size (Responsive) |
| :------------- | :--------------------- |
| spacing.xs | Extra Small (~4) |spacing.sm
| | Small (~8) |spacing.md
| | Medium (~16) |spacing.lg
| | Large (~24) |spacing.xl
| | Extra Large (~32) |spacing.xl2
| | 2x Extra Large (~40) |spacing.xl3
| | 3x Extra Large (~48) |spacing.xl4
| | 4x Extra Large (~56) |spacing.xl5
| | 5x Extra Large (~64) |spacing.xl6
| | 6x Extra Large (~72) |spacing.xl7
| | 7x Extra Large (~80) |spacing.xl8
| | 8x Extra Large (~88) |spacing.xl9
| | 9x Extra Large (~96) |spacing.xl10
| | 10x Extra Large (~104) |
Spacing is automatically responsive using rs() scaling!
---
`tsx
import { gap } from '@doj/react-native-responsive-kit';
`
ā
Works in flex containers without needing gap support from React Native!
---
`tsx
import { fontSizes } from '@doj/react-native-responsive-kit';
`
| Name | Size (responsive) |
| :--------------- | :-------------------- |
| fontSizes.xs | Extra Small (~10) |fontSizes.sm
| | Small (~12) |fontSizes.md
| | Medium (~14) |fontSizes.lg
| | Large (~16) |fontSizes.xl
| | Extra Large (~18) |fontSizes.xl2
| | 2x Extra Large (~20) |fontSizes.xl3
| | 3x Extra Large (~24) |fontSizes.xl4
| | 4x Extra Large (~28) |fontSizes.xl5
| | 5x Extra Large (~32) |fontSizes.xl6
| | 6x Extra Large (~36) |fontSizes.xl7
| | 7x Extra Large (~40) |fontSizes.xl8
| | 8x Extra Large (~44) |fontSizes.xl9
| | 9x Extra Large (~48) |fontSizes.xl10
| | 10x Extra Large (~52) |fontSizes.xl11
| | 11x Extra Large (~56) |fontSizes.xl12
| | 12x Extra Large (~60) |fontSizes.xl13
| | 13x Extra Large (~64) |fontSizes.xl14
| | 14x Extra Large (~68) |fontSizes.xl15
| | 15x Extra Large (~72) |fontSizes.xl16
| | 16x Extra Large (~76) |
---
`tsx
import { useSizes } from '@doj/react-native-responsive-kit';
const { screenWidth, screenHeight, wp, hp, rs, spacing, gap, fontSizes } =
useSizes();
console.log('Width:', screenWidth);
console.log('Height:', screenHeight);
`
ā Always stays updated if the device rotates or resizes!
---
| Name | Type | Description |
| :--------------------------------------- | :------------------------------------------------------------------------------------ | :---------------------------------------- |
| wp(percentage: number) | number | Get width as % of screen width |hp(percentage: number)
| | number | Get height as % of screen height |rs(size?: number \| null \| undefined)
| | number | Get a scaled responsive size |sizes.screenWidth
| | number | Device screen width (live) |sizes.screenHeight
| | number | Device screen height (live) |sizes.statusBarHeight
| | number | Status bar height |spacing
| | object | Predefined consistent responsive spacings |gap(size: keyof typeof spacing)
| | object | Flex gap utility using spacing keys |fontSizes
| | object | Predefined responsive font sizes |useSizes()
| | { screenWidth, screenHeight, statusBarHeight, wp, hp, rs, spacing, gap, fontSizes } | React Hook version, always up-to-date |
---
Works- If you pass a value (rs(16)), it scales it based on the current screen height.rs(undefined)
- If you don't pass a value (), it falls back to a default size calculated from height.
This makes it super reliable for fonts, icons, paddings, margins, etc.
---
`tsx
import {
wp,
hp,
rs,
spacing,
fontSizes,
gap,
} from '@doj/react-native-responsive-kit';
const App = () => {
return (
flex: 1,
alignItems: 'center',
justifyContent: 'center',
...gap('lg'),
}}
>
width: wp(90),
height: hp(25),
backgroundColor: 'lightblue',
borderRadius: spacing.sm,
padding: spacing.md,
justifyContent: 'center',
alignItems: 'center',
}}
>
);
};
``
---
If you find this project useful and would like to support the development, you can donate via the following platforms:
Your contributions will help keep this project active and improve its features. Thank you for your support! š
---
MIT License Ā© 2025 Daddy Omar Jeng