Design Tokens

Configuration

Define standardized spacing, typography, and sizing values that automatically scale across devices, powered by a central configuration provider.

Configure API Reference

Pre-defined Values

Use semantic keys like sm, md, or lg instead of magic numbers. We handle the responsive calculation for you.

Fully Customizable

Override the default scale or introduce your own design system tokens using the ResponsiveProvider.

Using Tokens

Instead of raw numbers, you can use token strings in createScaledStyles. These tokens map to pixel values that are then scaled based on the device width.

components/Card.tsx

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

export default function Card() {
  return (
    <View
      style={{
        padding: space.lg,        // 24 (scaled)
        margin: space.md,         // 16 (scaled)
        borderRadius: radius.lg,  // 16 (scaled)
        backgroundColor: "#1E293B",
      }}
    >
      <Text style={{ fontSize: font.title, color: "#fff" }}>
        Title Text
      </Text>
      <Text style={{ fontSize: font.body, marginTop: space.sm, color: "#94A3B8" }}>
        Body text with consistent spacing
      </Text>
    </View>
  );
}

Customizing via Provider

Wrap your application root with the ResponsiveProvider to inject your own design system values.

App.tsx

import { ResponsiveProvider } from 'react-native-responsive-ui';

const customTheme = {
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
    xxl: 48
  },
  typography: {
    base: 16,
    lg: 20,
    header: 32
  }
};

export default function App() {
  return (
    <ResponsiveProvider config={{ theme: customTheme }}>
      <MainNavigation />
    </ResponsiveProvider>
  );
}

Default Token Map

TOKEN NAME

BASE VALUE (PX)

SCALED (IPHONE 14)

SCALED (IPAD PRO)

xs

~4.3

sm

~8.6

~12

md

~17.2

~24

lg

~25.8

~36

xl

~34.5

~48

createScaledStyles

responsive()