Skip to main content

Platform-based UI branching (iOS vs Android)

getPlatformOS() returns 'ios' or 'android' synchronously. When the two platforms call for different design languages, branch at the component level for a natural UX on each.

Branch styles by platform​

import { getPlatformOS } from '@apps-in-toss/web-framework';

const isIos = getPlatformOS() === 'ios';

function PrimaryButton({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      style={{
        // iOS: pill shape; Android: Material 4 px radius
        borderRadius: isIos ? 24 : 4,
        // iOS system font; Android Roboto
        fontFamily: isIos ? '-apple-system, BlinkMacSystemFont, sans-serif' : 'Roboto, sans-serif',
        padding: '12px 24px',
        fontSize: 16,
        border: 'none',
        cursor: 'pointer',
      }}
    >
      {label}
    </button>
  );
}

getPlatformOS() is synchronous — read it once at module scope as an isIos flag and reuse it everywhere.

Swap entire components per platform​

import { getPlatformOS } from '@apps-in-toss/web-framework';

const platform = getPlatformOS();

function BackButton() {
  if (platform === 'ios') {
    // iOS: left-chevron style
    return (
      <button type="button" aria-label="Back">
        ‹ Back
      </button>
    );
  }

  // Android: Material arrow style
  return (
    <button type="button" aria-label="Back">
      ← Back
    </button>
  );
}

Swapping the entire component rather than conditionally styling it keeps each branch simple and easy to read.