React Native Universal

Every component uses React Native primitives as its source of truth. Styling flows through NativeWind (Tailwind for RN). Tokens are consumed from @tpisent/tokens, not hand-coded hex or px values.

import { View, Text, Pressable } from 'react-native';
import { styled } from 'nativewind';

const SView     = styled(View);
const SText     = styled(Text);
const SPressable = styled(Pressable);

type ButtonProps = {
  label: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary' | 'ghost';
};

export function Button({ label, onPress, variant = 'primary' }: ButtonProps) {
  const tone = {
    primary:   'bg-accent text-on-accent',
    secondary: 'bg-surface-secondary text-primary',
    ghost:     'bg-transparent text-primary',
  }[variant];
  return (
    <SPressable
      onPress={onPress}
      accessibilityRole="button"
      className={`${tone} rounded-md px-4 py-3 active:opacity-80`}
    >
      <SText className="text-base font-semibold">{label}</SText>
    </SPressable>
  );
}

Most of the surface area is identical across platforms. Where divergence is required, use Platform.select and keep the per-platform logic minimal and centralised.

import { Platform } from 'react-native';

const elevationStyle = Platform.select({
  ios:     { shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 6, shadowOffset: { width: 0, height: 2 } },
  android: { elevation: 4 },
  web:     { boxShadow: 'var(--elevation-2)' as any },
  default: {},
});

1. Pilot (1–3 months). Migrate Button, Input, Card, Typography, Icon to RN primitives rendered via RN Web in this showcase alongside the current shadcn versions.
2. Expansion (3–6 months). Migrate remaining form, data-display, feedback, and navigation components. Stand up Expo-managed sample apps for iOS and Android.
3. Platform expansion (6–9 months). Add RN Windows and RN macOS sample apps. Add native-only patterns (tab bar, action sheet, segmented control, menu bar).
4. Production (9–12 months). Deprecate shadcn/Radix primitives; all web UI routes through RN Web. Publish @tpisent/ui as an npm package.