@hassaanrasheed/react-native-auto-responsive

The ultimate responsive scaling system for React Native. Stop worrying about screen sizes—automatically adapt your layouts across phones, tablets, and foldables with a smart scaling engine and elegant string syntax.

🚀 Key Features

• 📱 Auto-Scaling: Seamlessly scales dimensions based on screen width/height.
• 💻 Device Intelligent: Smart dampening for Tablets and Foldables to avoid oversized UI.
• 💎 Elegant Syntax: Use '20@s', '15@vs', '50@w' directly in style objects.
• 🧩 Built-in Components: RView, RText, and RImage for hook-less scaling.
• 📐 Responsive Grid: Adaptive column system for complex layouts.
• 🎨 Theming Engine: Global theme support for colors and spacing.
• 🔍 Visual Debugger: Real-time dimension tracking overlay for development.
• ⚡ Performance: Optimized with dual-layer caching (WeakMap) for zero re-render overhead.

📦 Installation

# npm
npm install @hassaanrasheed/react-native-auto-responsive

# yarn
yarn add @hassaanrasheed/react-native-auto-responsive

# Expo
npx expo install @hassaanrasheed/react-native-auto-responsive

🚦 Quick Start

1. Setup Provider

Wrap your root component. This is where you can enable debugMode for development.

import { ResponsiveProvider } from '@hassaanrasheed/react-native-auto-responsive';

export default function App() {
  return (
    <ResponsiveProvider config={{ debugMode: __DEV__ }}>
      <YourAppContents />
    </ResponsiveProvider>
  );
}

2. Modern Scaling (The useRS Hook)

The useRS hook is the recommended way to create high-performance responsive styles.

import { useRS } from '@hassaanrasheed/react-native-auto-responsive';

const MyComponent = () => {
  const styles = useRS({
    card: {
      width: '90@w',         // 90% of screen width
      padding: '16@ms',      // Moderate scale for consistent spacing
      borderRadius: '12@ms',
      backgroundColor: '#fff',
    },
    title: {
      fontSize: '20@fs',     // Font scaling with accessibility support
      marginBottom: '10@vs', // Vertical scaling for heights/gaps
    }
  });

  return <View style={styles.card} />;
};

🎨 Global Theming & Spacing

Define a central theme and spacing system that scales automatically across all devices.

Implementation:

const myTheme = {
  colors: { primary: '#6200ee', background: '#f5f5f5' },
  spacing: {
    xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48
  }
};

<ResponsiveProvider config={{ theme: myTheme }}>
  <Main />
</ResponsiveProvider>

Usage in Components:

import { useResponsive } from '@hassaanrasheed/react-native-auto-responsive';

const ThemeDemo = () => {
  const { theme, spacing, scale } = useResponsive();

  return (
    <View style={{ 
      backgroundColor: theme.colors.background,
      padding: scale(spacing.md) // Access responsive spacing tokens
    }}>
      <Text>Theme Aware Content</Text>
    </View>
  );
};

🧱 Components & Layouts

Built-in Responsive Components

Avoid hooks entirely for simple layouts by using our auto-scaling components.

import { RView, RText, RImage } from '@hassaanrasheed/react-native-auto-responsive';

const ProfileHeader = () => (
  <RView rStyle={{ padding: '20@s', alignItems: 'center' }}>
    <RImage 
      source={require('./avatar.png')} 
      rStyle={{ width: '80@s', height: '80@s', borderRadius: '40@s' }} 
    />
    <RText rStyle={{ fontSize: '18@fs', marginTop: '10@vs' }}>
      Hassaan Rasheed
    </RText>
  </RView>
);

Responsive Grid

Create layouts that automatically change columns based on the device type.

import { ResponsiveGrid } from '@hassaanrasheed/react-native-auto-responsive';

const Dashboard = () => (
  <ResponsiveGrid 
    columns={{ phone: 1, tablet: 2, foldable: 3 }} 
    gutter={20} // Automatically scales
  >
    <Card title="Sales" />
    <Card title="Users" />
    <Card title="Revenue" />
  </ResponsiveGrid>
);

📐 String Syntax Reference

| Suffix | Function | Use Case | | :--- | :--- | :--- | | @s | scale() | Width, horizontal padding/margin, left/right. | | @vs | verticalScale() | Height, vertical padding/margin, top/bottom. | | @ms | moderateScale() | Small Spacing, Border Radius, Icons. | | @fs | fontScale() | Typography (Respects system accessibility settings). | | @w | width% | Direct percentage of current screen width (e.g. '100@w'). | | @h | height% | Direct percentage of current screen height (e.g. '50@h'). |

🔍 Visual Debugger

Enable debugMode: true in your config to see a floating RS button. It provides real-time insights:

• Device Category: Detects if it's a Small Phone, Tablet, or Foldable.
• Orientation: Tracks Portrait vs Landscape state.
• Raw Dimensions: Real-time Window Width and Height.

⚙️ Custom Scaling Configuration

Fine-tune the engine for your specific design requirements.

const config = {
  baseWidth: 375,           // Your designer's artboard width
  baseHeight: 812,          // Your designer's artboard height
  tabletScaleFactor: 0.6,   // Dampen scaling on tablets (0.0 - 1.0)
  foldableScaleFactor: 0.8, // Dampen scaling on foldables
  androidScaleFactor: 1.05, // Specific multiplier for Android
  iosScaleFactor: 1.0,      // Specific multiplier for iOS
};

📜 License

MIT © 2026 Hassaan Rasheed