@neazk/react-native-scaling-utils

Lightweight scaling helpers for React Native layouts, spacing, and typography. Make your UI fit nicely on more screens without the usual guesswork. 📱✨

Features 🚀

• Horizontal, vertical, and moderate scaling helpers
• Font scaling with a built-in readability clamp
• Tablet detection helpers
• Simple named exports with short aliases

Installation 📦

npm install @neazk/react-native-scaling-utils

# expo
npx expo install @neazk/react-native-scaling-utils

Usage 🛠️

import { s, vs, ms, mvs, fs, getDeviceType } from '@neazk/react-native-scaling-utils';

const styles = {
  container: {
    paddingHorizontal: s(16),
    paddingVertical: vs(12),
    borderRadius: ms(10),
  },
  title: {
    fontSize: fs(22),
    marginBottom: mvs(8),
  },
};

const deviceType = getDeviceType(); // 'phone' | 'tablet'

Full Example 🎨

import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { s, vs, ms, mvs, fs, getDeviceType } from '@neazk/react-native-scaling-utils';

const deviceType = getDeviceType();

export default function App() {
  return (
    <SafeAreaView style={styles.screen}>
      <View style={styles.card}>
        <Text style={styles.eyebrow}>{deviceType.toUpperCase()}</Text>
        <Text style={styles.title}>Responsive card ✨</Text>
        <Text style={styles.description}>
          Spacing, radius, and font sizes scale with the current screen dimensions.
        </Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F5F7FA',
    paddingHorizontal: s(20),
    paddingTop: vs(24),
  },
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: ms(16),
    paddingHorizontal: s(18),
    paddingVertical: vs(20),
    marginTop: mvs(12),
    shadowColor: '#000000',
    shadowOpacity: 0.08,
    shadowRadius: ms(10),
    shadowOffset: { width: 0, height: vs(4) },
    elevation: 3,
  },
  eyebrow: {
    fontSize: fs(12),
    letterSpacing: s(1),
    marginBottom: mvs(6),
    color: '#5B6470',
  },
  title: {
    fontSize: fs(24),
    lineHeight: fs(30),
    marginBottom: mvs(8),
    color: '#111827',
  },
  description: {
    fontSize: fs(15),
    lineHeight: fs(22),
    color: '#4B5563',
  },
});

API 🧰

• scale(size) or s(size) - scales by screen width
• verticalScale(size) or vs(size) - scales by screen height
• moderateScale(size, factor?) or ms(size, factor?) - soft width-based scaling
• moderateVerticalScale(size, factor?) or mvs(size, factor?) - soft height-based scaling
• fontScale(size, factor?) or fs(size, factor?) - moderate font scaling with clamping
• isTablet() - returns true when the current device matches the tablet heuristic
• getDeviceType() - returns 'phone' or 'tablet'

Base Dimensions 📐

The package uses these friendly defaults:

• SIZE_MATTERS_BASE_WIDTH=360
• SIZE_MATTERS_BASE_HEIGHT=780

You can override them through environment variables before bundling your app.

Notes 📝

• Dimensions are updated automatically when the screen size changes.
• react-native is a peer dependency.
• The package is JS-only and does not require linking any native modules.

License 📄

MIT