npm package: @neazk/react-native-scaling-utils
Description: React Native scaling utilities for responsive layouts, spacing, and font sizes
Author: ibrahim adel
Latest version: 1.3.0

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

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

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


## Usage 🛠️

```ts
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 🎨

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