React Native

Add Expo modules

bunx install-expo-modules@latest

The library needs expo-linear-gradient, and expo install is what pins every native module to a version your React Native builds. Your app stays a React Native CLI app.

Install the packages

bun add @delacour/react-native-uibunx expo install @legendapp/list expo-linear-gradient react-native-gesture-handler react-native-keyboard-controller react-native-pulsar react-native-reanimated react-native-safe-area-context react-native-svg react-native-teleport react-native-worklets uniwindbun add @central-icons-react-native/round-outlined-radius-1-stroke-1.5 tailwindcss

Add the worklets Babel plugin

babel.config.js

module.exports = {
  presets: ["module:@react-native/babel-preset"],
  plugins: ["react-native-worklets/plugin"],
};

Reanimated 4 needs it, and it must be last in plugins. Expo's preset adds it for you; the React Native preset does not.

Create the CSS entry

global.css

@import "tailwindcss";
@import "uniwind";
@import "@delacour/react-native-ui/styles";

@source "./App.tsx";
@source "./src";
@source "./node_modules/@delacour/react-native-ui/src";

Point the first @source at your own code. In a monorepo use the library's real path — Tailwind's scanner does not follow symlinks.

Wrap Metro with Uniwind

metro.config.js

const { getDefaultConfig } = require("@react-native/metro-config");
const { withUniwindConfig } = require("uniwind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withUniwindConfig(config, {
  cssEntryFile: "./global.css",
  dtsFile: "./uniwind-types.d.ts",
});

withUniwindConfig must be the outermost wrapper.

Mount the provider

App.tsx

import "./global.css";
import { Button } from "@delacour/react-native-ui/button";
import { DelacourProvider } from "@delacour/react-native-ui/provider";
import { useState } from "react";
import { View } from "react-native";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <DelacourProvider>
      <View className="flex-1 items-center justify-center bg-background">
        <Button onPress={() => setCount(count + 1)}>Pressed {count} times</Button>
      </View>
    </DelacourProvider>
  );
}

The CSS import is the first statement, and the provider wraps everything once. Both fail silently when missing.

Build and run

cd ios && pod install && cd ..
npx react-native run-ios

npx react-native run-android for Android.

Check the wiring

bunx delacour@latest doctor

On this page