@studio-piot/native-ui

Shared React Native components for Studio Piot apps.

The package is the native counterpart of @studio-piot/ui. Apps own their palettes; the package provides theme helpers and presentational components.

Install

pnpm add @studio-piot/native-ui

Select peers @gorhom/bottom-sheet, react-native-reanimated, react-native-gesture-handler, and react-native-screens (iOS FullWindowOverlay so the sheet appears above React Navigation modals). SegmentedControl uses that same react-native-reanimated peer to slide the selection fill. Slider peers @react-native-community/slider. ErrorBanner peers react-native-svg for the megaphone and row arrow. FieldDateTime (from @studio-piot/native-ui/date-time) needs @expo/ui, an optional peer only that entry uses. HeaderIcon and HeaderCapsule take an icon render function, so they add no peer; pass expo-symbols SymbolView or any icon component.

Theme roles

The package never reads your app's own colour names (background, text, primary, …). Every component reads roles with its own prefix (buttonBackground, formBackground, pageBackground, segmentLabel, …), and each one has a matching optional prop. Map those roles to your palette in the ThemeProvider colours:

const Colors = {
  light: { pageBackground: palette.paper, buttonBackground: palette.brand, /* … */ },
  dark: { pageBackground: palette.ink, buttonBackground: palette.brand, /* … */ },
};

Each component doc lists its roles.

Docs

• Theme provider and Button usage
• LinkBlocks usage
• Field usage
• FieldDateTime usage
• Choice usage
• Tabs usage
• Form usage
• HeaderWash usage
• FormSheet usage
• ErrorBanner usage
• Toast usage
• RadioField usage
• Select usage
• SegmentedControl usage
• Slider usage
• Header buttons (Liquid Glass) usage
• TabAccessoryButton (Liquid Glass) usage
• Page usage
• Design: theme provider and Button
• Design: LinkBlocks
• Design: Field
• Design: RadioField
• Design: Select
• Design: Slider

Quick start

import { Button, ThemeProvider } from "@studio-piot/native-ui";

const Colors = {
  light: { buttonBackground: "#111", buttonLabel: "#fff" },
  dark: { buttonBackground: "#eee", buttonLabel: "#111" },
};

export function App() {
  return (
    <ThemeProvider colors={Colors}>
      <Button label="Save" onPress={() => undefined} />
    </ThemeProvider>
  );
}

Local development

pnpm install
pnpm dev

This repo uses pnpm (pnpm-lock.yaml); don't run npm install here.

pnpm dev rebuilds dist as you edit. prepare also builds on install, so a linked or file: dependency in a consumer app stays usable after installing.

When this package lives outside the consumer app root (e.g. a monorepo sibling), configure Metro watchFolders so the app picks up source changes; add nodeModulesPaths if resolution needs it.

Add a component

1. Add src/components/YourComponent.tsx.
2. Export it from src/components/index.ts and src/index.ts.
3. Document it under docs/components/ and link it from this README.
4. Run pnpm build and pnpm test before publishing.

Publish

pnpm publish

pnpm publish checks you're on a clean main; publish from there.

prepublishOnly builds dist first. The package is public (publishConfig.access).

License

ISC