@doj/react-native-responsive-kit v0.1.2

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

or

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

🧩 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! 🙏

🛡️ License

MIT License © 2025 Daddy Omar Jeng