s() Function

Core Utility

A low-level utility to wrap a number and return a scaled value based on the device's screen dimensions. Ideal for inline styles, component props, and manual calculations.

Live Demo

Why use this?

While createScaledStyles is great for StyleSheet objects, sometimes you need to pass a raw number to a component. The s() function lets you apply the same scaling logic to icon sizes, animation constants, or conditional layout values.

Basic Usage

Import s (short for scale) and wrap your numeric values.

components/Card.tsx

<View style={{
  width: s(150),        // Auto-scales!
  height: s(150),
  borderRadius: s(24),
  backgroundColor: '#6366f1',
}} />

Where to use

The s() function gives you manual control. It's best used in places where standard StyleSheet objects aren't applicable.

Props like `iconSize`, `avatarSize`

Animated.Value initialization

Inline `style={{ width: s(50) }}`

Custom layout calculations

SCALE EXAMPLES

s(16)

→~17.2 (iPhone 14)

s(50)

→~54 (iPhone 14)

s(50) on iPad

→~75 (iPad Pro)

Interactive Demo

Demo.js

Open in Snack

import { s } from "@vincent-huy-uit/react-native-responsive-ui";
import { View, Text } from "react-native";

export default function Card() {
  return (
    <View
      style={{
        padding: s(16),
        margin: s(20),
        borderRadius: s(12),
        backgroundColor: "#1E293B",
      }}
    >
      <Text style={{ fontSize: s(24), color: "#fff" }}>
        Hello World
      </Text>
      <Text style={{ fontSize: s(14), marginTop: s(8), color: "#94A3B8" }}>
        All sizes scale automatically!
      </Text>
    </View>
  );
}

Preview Mode

Hello World

All sizes scale automatically!

Installation

createScaledStyles