@delacour/react-native-ui

A React Native component library. Styling is Uniwind — Tailwind v4 for React Native; interaction is Reanimated and Gesture Handler; haptics are Pulsar.

The package ships raw .tsx with no build step. Uniwind's transform has to run inside the consuming app's Metro pipeline, so a precompiled build would arrive with its classNames already dead.

Install

bun add @delacour/react-native-ui

Native modules are peer dependencies, because two copies of a native module register twice and break at runtime. The complete list — native modules through expo install, the rest through your package manager — is derived from the components' own imports and kept on the Installation page. Six peers are optional and resolve only if you import the subpath that needs them:

Granular exports are what make that safe: an app that never imports a subpath never makes Metro resolve its peers.

Setup

1. Styles. In your app's global.css:

@import '@delacour/react-native-ui/styles';
@source '../../../../packages/react-native-ui/src';

Use the real workspace path, not a node_modules one — Bun symlinks workspace packages and Tailwind's scanner cannot follow symlinks, so classes would be silently dropped from production builds.

2. Provider. Wrap the app's root:

import { DelacourProvider } from "@delacour/react-native-ui/provider";

<DelacourProvider>{children}</DelacourProvider>;

That is the gesture root every Pressable needs above it, the safe-area provider and keyboard provider Screen reads, and the keyboard state sync that keeps them honest. An app with a BottomSheet mounts BottomSheetProvider inside it, from @delacour/react-native-ui/bottom-sheet — the sheet's engine is an optional peer, so the provider cannot.

Usage

There is no package-wide barrel. Import from the subpath:

import { Button } from "@delacour/react-native-ui/button";
import { Icon } from "@delacour/react-native-ui/icon";
import { IconArrowRight } from "@delacour/react-native-ui/icons/central";

// The icon inherits the button's size and its variant's colour.
<Button haptic="selection" onPress={next}>
  <Button.Label>Continue</Button.Label>
  <Icon icon={IconArrowRight} />
</Button>;

Components

Also exported: hooks/*, lib/*, expo/navigation-theme, icons/central, and the styles/* CSS entries.

Theming

Tokens are CSS variables under @variant light / @variant dark. Components reference semantic names — bg-background, text-muted-foreground — never a raw palette colour or a dark: prefix. For a prop needing a colour value rather than a class, use useThemeColor.

Documentation

AGENTS.md is the reference — the rules, the patterns, and the reasoning behind each decision. Each component has its own alongside its source in src/components.