createScaledStyles

Core API

A drop-in replacement for React Native's StyleSheet.create that automatically scales your numeric values based on device dimensions.

Live Demo

Why use this?

Designing for mobile often requires tedious calculations to ensure your UI looks consistent across phones and tablets. createScaledStyles handles this automatically by interpreting your numeric style values and scaling them proportionally to the user's screen width.

Basic Usage

Simply replace your existing StyleSheet import with our scaled version. It returns a standard React Native style object.

components/Card.tsx

const styles = createScaledStyles({
  box: {
    width: 150,           // Auto-scales!
    height: 150,
    borderRadius: 24,
    backgroundColor: '#6366f1',
  },
});

Smart Exclusion

Not every number should be scaled. createScaledStyles is intelligent enough to ignore properties that are typically unitless or fixed ratios.

flex, flexGrow, zIndex

opacity, shadowOpacity

elevation

aspectRatio

CONVERSION EXAMPLES

padding: 20

→21.5 (Scaled)

flex: 1

→1 (Ignored)

opacity: 0.8

→0.8 (Ignored)

Interactive Demo

Demo.js

Open in Snack

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

export default function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello World</Text>
      <Text style={styles.subtitle}>This scales automatically!</Text>
    </View>
  );
}

// All numeric values are auto-scaled based on screen width
const styles = createScaledStyles({
  card: {
    padding: 16,        // Scales: 16 → ~18 on larger screens
    borderRadius: 12,   // Scales: 12 → ~14
    backgroundColor: "#1E293B",
  },
  title: {
    fontSize: 24,       // Scales: 24 → ~27
    fontWeight: "700",
    color: "#F8FAFC",
  },
  subtitle: {
    fontSize: 14,       // Scales: 14 → ~16
    color: "#94A3B8",
    marginTop: 8,       // Scales: 8 → ~9
  },
});

Preview Mode

Hello World

All sizes scale automatically!

s() Function

Design Tokens