@doj/react-native-responsive-kit

v0.1.2

Published

8 months ago

@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

0High
0Medium
0Low

doj

react-native ios android responsive kit utilities scaling layout font DOJ Daddy Omar Jeng omarjeng

npm License Downloads

📦 @doj/react-native-responsive-kit

A 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.

✨ Features

📱 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

📥 Installation

npm install @doj/react-native-responsive-kit

yarn add @doj/react-native-responsive-kit

🚀 Usage

import {
  wp,
  hp,
  rs,
  sizes,
  spacing,
  gap,
  fontSizes,
  useSizes,
} from '@doj/react-native-responsive-kit';

📏 Responsive Width and Height

import { wp, hp } from '@doj/react-native-responsive-kit';

<View
  style={{
    width: wp(80), // 80% of screen width
    height: hp(20), // 20% of screen height
  }}
/>;

🔠 Responsive Text and Sizes

import { rs } from '@doj/react-native-responsive-kit';

<Text style={{ fontSize: rs(16) }}>Responsive Text</Text>

<View style={{ padding: rs(10) }}>
  <Text>Button</Text>
</View>

📐 Access Device Sizes

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

🎯 Consistent Spacing

import { spacing } from '@doj/react-native-responsive-kit';

<View
  style={{
    padding: spacing.md,
    marginBottom: spacing.lg,
  }}
/>;

Spacing is automatically responsive using rs() scaling!

➖ Add Gaps Between Flex Children

import { gap } from '@doj/react-native-responsive-kit';

<View style={[{ flexDirection: 'row' }, gap('md')]}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</View>;

✅ Works in flex containers without needing gap support from React Native!

🔡 Predefined Responsive Font Sizes

import { fontSizes } from '@doj/react-native-responsive-kit';

<Text style={{ fontSize: fontSizes['2xl'] }}>Responsive Heading</Text>;

♻️ useSizes() Hook

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!

🛠️ API Reference

| 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 |

🧩 How `rs()` Works

If you pass a value (rs(16)), it scales it based on the current screen height.
If you don't pass a value (rs(undefined)), it falls back to a default size calculated from height.

This makes it super reliable for fonts, icons, paddings, margins, etc.

📚 Example

import {
  wp,
  hp,
  rs,
  spacing,
  fontSizes,
  gap,
} from '@doj/react-native-responsive-kit';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        ...gap('lg'),
      }}
    >
      <View
        style={{
          width: wp(90),
          height: hp(25),
          backgroundColor: 'lightblue',
          borderRadius: spacing.sm,
          padding: spacing.md,
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Text style={{ fontSize: fontSizes['2xl'] }}>Responsive Box</Text>
      </View>
    </View>
  );
};

💰 Support the Project

If you find this project useful and would like to support the development, you can donate via the following platforms:

☕ Buy Me A Coffee

Buy me a coffee

💎 Patreon

Become a Patron on Patreon

Your contributions will help keep this project active and improve its features. Thank you for your support! 🙏