@perako/ui-native

Thin React Native primitives that consume @perako/design-tokens through native theme objects. Mirrors the component set of @perako/ui-web so the same design-system primitives are available on both mobile and web.

Install

npm install @perako/ui-native @perako/design-tokens react-native-svg
# peer deps: react >=18, react-native >=0.72, react-native-svg >=13 (for Icon/Logo)

react-native-svg is an optional peer dependency — only required if you use Icon/Logo (Expo projects already bundle it).

Usage

Components accept an optional theme prop (defaults to the light theme). Pass rnDarkTheme for dark mode, or thread a theme down from your own provider.

import { rnDarkTheme } from "@perako/design-tokens";
import { Screen, Card, Button, Text } from "@perako/ui-native";

export function Wallet({ isDark }) {
  const theme = isDark ? rnDarkTheme : undefined;
  return (
    <Screen scroll theme={theme}>
      <Card elevated theme={theme}>
        <Text variant="title" theme={theme}>Welcome</Text>
        <Button variant="primary" theme={theme} onPress={onContinue}>Continue</Button>
      </Card>
    </Screen>
  );
}

Components

Badge, Button, Card, Divider, ErrorBoundary, ErrorFallback, Icon, IconButton, Input, LoadingSkeleton, Logo, NetworkBanner, Screen, SegmentedTabs, Text, Toast.

Icon renders any icon from the shared @perako/design-tokens registry via react-native-svg; Logo renders the Perako logo mark. Icon color defaults to the theme's primary text color (the native analog of web's currentColor):

import { Icon, Logo } from "@perako/ui-native";

<Icon name="search" size={20} />
<Icon name="check-circle" color={theme.colors.action.success} />
<Logo mode="dark" size={64} />

These are low-risk visual primitives only. They carry no product logic — no OpenFort wallet/recovery/provisioning, Supabase auth, transaction/faucet logic, navigation, or chain RPC ownership. See plan.md → Governance Rules.

Scripts

npm run build      # tsc -> dist
npm run typecheck
npm run test       # build + smoke tests (export parity + token consumption)

Note: the package typechecks against a local react-native type shim (src/react-native-shim.d.ts) so it can build without React Native installed in this repo. Consumers resolve the real react-native peer dependency.