ResponsiveProvider

Config

Wrap your app with ResponsiveProvider to customize breakpoints, scaling base width, and design tokens for your entire application.

Live Demo

Why use this?

The default values work great for most apps, but when you need to match your design system or support custom breakpoints, ResponsiveProvider lets you override any configuration globally.

Basic Usage

Wrap your app root with the provider. Without a config prop, it uses default values.

App.tsx

import { ResponsiveProvider } from "@vincent-huy-uit/react-native-responsive-ui";

export default function App() {
  return (
    <ResponsiveProvider>
      <YourApp />
    </ResponsiveProvider>
  );
}

Custom Breakpoints

Override the default breakpoints to match your design requirements.

App.tsx

import { ResponsiveProvider } from "@vincent-huy-uit/react-native-responsive-ui";

const customConfig = {
  breakpoints: {
    mobile: 0,      // 0 - 599px
    tablet: 600,    // 600 - 1023px
    desktop: 1024,  // 1024px+
  },
};

export default function App() {
  return (
    <ResponsiveProvider config={customConfig}>
      <YourApp />
    </ResponsiveProvider>
  );
}

Custom Design Tokens

Define your own spacing, typography, and radius tokens that align with your design system.

App.tsx

import { ResponsiveProvider } from "@vincent-huy-uit/react-native-responsive-ui";

const customConfig = {
  // Base width for scaling calculations (default: 375)
  baseWidth: 390,

  // Custom spacing tokens
  space: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
    xxl: 48,
  },

  // Custom font size tokens
  font: {
    caption: 12,
    body: 14,
    title: 18,
    heading: 24,
    hero: 32,
  },

  // Custom border radius tokens
  radius: {
    sm: 4,
    md: 8,
    lg: 16,
    full: 9999,
  },
};

export default function App() {
  return (
    <ResponsiveProvider config={customConfig}>
      <YourApp />
    </ResponsiveProvider>
  );
}

Config Options

Option	Type	Default	Description
`baseWidth`	number	375	Base screen width for scaling calculations
`breakpoints`	object	{ mobile: 0, tablet: 768, desktop: 1024 }	Custom breakpoint thresholds
`space`	object	{ xs: 4, sm: 8, md: 16, lg: 24, xl: 32 }	Custom spacing tokens
`font`	object	{ body: 14, title: 18, heading: 24 }	Custom font size tokens
`radius`	object	{ sm: 4, md: 8, lg: 16 }	Custom border radius tokens

useDeviceType

ResponsiveSwitch