@itmaxglobal/design-system-mobile-native

React Native counterpart to the CSS design system in the repo root (src/, dist/). CSS and the DOM don't exist in React Native, so nothing here is a port of the existing code — it's a from-scratch implementation that follows the same tokens and component set.

Status

• src/theme/ is fully ported: colors (including computed OKLCH shade ramps), spacing, radius, typography, and shadows all match ../../src/tokens.css.
• Implemented: badge, icon, flag-icon, file-icon. Everything else under src/components/*/index.ts is still a placeholder stub.

Structure

• src/theme/ — colors (incl. oklch.ts, the color-mix(in oklch, ...) reimplementation), spacing, radius, typography, shadows. Source of truth for values is the CSS custom properties in ../src/tokens.css.
• src/components/<name>/ — one folder per component, mirroring ../src/components/*.css 1:1.

Component pattern (see src/components/badge/Badge.tsx)

• Pull colors/spacing/radius/typography from ../../theme, never hardcode values.
• Resolve light vs. dark with useColorScheme() from react-native, picking lightTheme/darkTheme — this is the RN equivalent of the CSS [data-theme="dark"] override.
• Mirror the CSS component's variant/size/color modifiers as props rather than inventing a new API.
• Accept a style/textStyle prop as an escape hatch instead of adding one-off props for every visual tweak.

Icon / flag / file-icon assets

These three needed real vector assets, unlike Badge's pure styling:

• icon wraps phosphor-react-native (the RN counterpart to the CSS layer's @phosphor-icons/web). Rather than a 1500+-entry name lookup, Icon takes the Phosphor icon component itself as a prop (<Icon icon={HeartIcon} size="lg" color="primary" />), keeping icon selection tree-shakeable and type-checked.
• flag-icon bundles the flag-icons package's actual SVG files (both 4x3 and 1x1 aspect ratios, ~270 countries each) via react-native-svg + react-native-svg-transformer. src/components/flag-icon/flags.generated.ts is auto-generated — do not hand-edit it; regenerate with node scripts/generate-flags.mjs if the flag-icons dependency is upgraded.
• file-icon needed no new dependency: the CSS version's embedded SVG paths (folded-corner document shape) are reused verbatim as inline react-native-svg <Path> elements.

Two things any new component that needs vector assets should know about:

• react-native-svg is a peerDependency of this package (like react/react-native) — also listed in devDependencies for this package's own standalone tsc runs.
• .svg imports only work inside example/ because example/metro.config.js configures the react-native-svg-transformer babel transform. Both src/svg.d.ts and example/svg.d.ts declare the ambient *.svg module type (needed twice — native/ and example/ are separate tsc programs).

Viewing components — example/

native/ is an npm workspace root with example as its only member — a minimal Expo app (TypeScript template) that imports components straight from ../src and renders them, so you have somewhere to actually see what's being built. App.tsx currently shows every Badge variant/size/color combination.

Because it's a real workspace, react/react-native/expo are hoisted to a single shared copy at native/node_modules — install from native/, not native/example:

cd native
npm install   # first time only — installs both the library's devDeps and example's deps together
cd example
npm start     # then press i (iOS sim), a (Android emulator), or scan the QR with Expo Go

example/metro.config.js follows Expo's documented monorepo setup: it watches the parent folder (so the relative ../src imports bundle) and tells Metro to also check the workspace root's node_modules when resolving packages. npx expo-doctor from example/ should report 18/18 checks passing — if a future change makes that regress, treat it as a real signal, not noise.

Expo Go version note: Expo Go on the App Store only supports one SDK at a time, generally trailing the very latest expo release by a version or two. If npm start bundles fine but Expo Go on your phone refuses to open it with an "incompatible" error, your installed expo version is newer than what Expo Go currently supports — check the Expo changelog for the SDK Expo Go currently ships, then in example/: npm install expo@<that-major>.x --save && npx expo install --fix.

App.tsx is a shell with a sidebar drawer (src/Sidebar.tsx, toggled via the ☰ button) listing every component from src/navigation.ts, grouped the same way as the CSS docs site. Selecting an item shows its demo screen if one exists in App.tsx's SCREENS map (src/screens/*Screen.tsx), otherwise a "not implemented yet" placeholder. As new components are implemented, add a <Name>Screen.tsx and wire it into that map.

Next steps

Implement the remaining components one at a time using RN primitives (View, Text, Pressable, etc.), starting with simple presentational ones (avatar, chip) before complex interactive ones (calendar, otp-field, sheet).