Introduction

import {
  s, responsive, createScaledStyles,
  ResponsiveSwitch, useDeviceType,
} from "@vincent-huy-uit/react-native-responsive-ui";

export default function Example() {
  const device = useDeviceType(); // "mobile" | "tablet" | "desktop"

  // responsive() - different values per device
  const columns = responsive({ mobile: 1, tablet: 2, desktop: 3 });

  return (
    <View style={styles.container}>
      {/* s() - scale individual values */}
      <Text style={{ fontSize: s(20) }}>
        Device: {device} | Columns: {columns}
      </Text>

      {/* ResponsiveSwitch - render different components */}
      <ResponsiveSwitch
        mobile={<MobileCard />}
        tablet={<TabletCard />}
      />
    </View>
  );
}

// createScaledStyles() - auto-scale all numeric values
const styles = createScaledStyles({
  container: { flex: 1, padding: 16 },
  card: { padding: 16, borderRadius: 12 },
});