@gsalil/react-native-responsive-scale

Scale your React Native UI consistently across all screen sizes. Design once on iPhone 11 (414×896) — it adapts everywhere.

The Problem

Hard-coded pixel values look great on your test device, broken everywhere else.

// ❌ Looks fine on iPhone 11, too small on iPad, too big on small Android
<Text style={{ fontSize: 16, padding: 20 }}>Hello</Text>

// ✅ Scales correctly on every device
<Text style={{ fontSize: fp(16), padding: spH(20) }}>Hello</Text>

Installation

npm install @gsalil/react-native-responsive-scale

Quick Start

Import the short aliases and wrap your values — that's it.

| Alias | Full name | Use for | |-------|-----------|---------| | wp | widthScale | widths, horizontal sizes | | hp | heightScale | heights, vertical sizes | | fp | fontScale | font sizes | | spH | horizontalSpacing | padding/margin left & right | | spV | verticalSpacing | padding/margin top & bottom |

import { wp, hp, fp, spV, spH } from '@gsalil/react-native-responsive-scale';

const styles = StyleSheet.create({
  card: {
    width: wp(320),       // scales with screen width
    height: hp(200),      // scales with screen height
    paddingHorizontal: spH(16),
    paddingVertical: spV(12),
  },
  title: {
    fontSize: fp(18),     // scales with screen width
  },
});

Full Example

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { wp, hp, fp, spV, spH } from '@gsalil/react-native-responsive-scale';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <Text style={styles.title}>Responsive Card</Text>
        <Text style={styles.body}>Looks great on every device.</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: spH(20),
  },
  card: {
    width: wp(320),
    height: hp(200),
    paddingVertical: spV(16),
    paddingHorizontal: spH(12),
    backgroundColor: '#fff',
    borderRadius: 8,
    elevation: 3,
  },
  title: {
    fontSize: fp(18),
    fontWeight: 'bold',
    marginBottom: spV(8),
  },
  body: {
    fontSize: fp(14),
    color: '#666',
  },
});

Advanced

Custom baseline (e.g. design delivered for Android)

Call setGuidelineBase once at app startup, before any scaling runs.

import { setGuidelineBase } from '@gsalil/react-native-responsive-scale';

// In your app entry point (e.g. App.tsx, index.ts)
setGuidelineBase(360, 760); // match your Figma/design baseline

Per-call override (no global state change)

import { widthScale } from '@gsalil/react-native-responsive-scale';

// Uses a different baseline for just this one value
const value = widthScale(120, { baseWidth: 375, baseHeight: 812 });

Reset to default (iPhone 11 — 414×896)

import { resetGuidelineBase } from '@gsalil/react-native-responsive-scale';

resetGuidelineBase();

API Reference

| Function | Returns | Description | |----------|---------|-------------| | widthScale(size, options?) | number | Scale relative to screen width | | heightScale(size, options?) | number | Scale relative to screen height | | fontScale(size, options?) | number | Scale font size (width-based) | | horizontalSpacing(size, options?) | number | Scale horizontal padding/margin | | verticalSpacing(size, options?) | number | Scale vertical padding/margin | | normalize(size, based?, options?) | number | Core scaling function | | setGuidelineBase(width, height) | void | Set global baseline dimensions | | getGuidelineBase() | { width, height } | Read current baseline | | resetGuidelineBase() | void | Reset to iPhone 11 (414×896) |

options shape: { baseWidth?: number; baseHeight?: number }

License

MIT