beUI Pro pour mobile est disponible : 50 blocs et écrans React Native

Configuration React Native

Configurez votre app Expo une seule fois, puis installez n'importe quel écran ou bloc mobile depuis le registry privé. La configuration suit le guide beUI Native gratuit, avec les chemins où s'installent les items Pro.

Expo SDK, React Native58, 0.88 with React 19

Reanimated and Worklets4.7 and 0.13

Gesture Handler3.3

React Native SVG15.16

Uniwind with Tailwind CSS1.12 with 4.3

1. Installer les bibliothèques

Chaque item s'anime avec Reanimated et se style avec Uniwind. Installez via Expo pour que les versions correspondent à votre SDK. Certains items demandent plus, comme Skia ou Bottom Sheet ; chaque page d'item liste les siens.

npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-svg
npm install uniwind tailwindcss

2. Configurer Uniwind et le thème

Enveloppez votre configuration Metro avec Uniwind. Le preset Babel d'Expo ajoute le plugin Worklets, donc les apps Expo n'ont besoin d'aucune modification Babel.

JSmetro.config.js

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

const config = getDefaultConfig(__dirname);

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

Créez global.css à la racine du projet. L'import du thème pointe vers les tokens ajoutés par la première installation ; si votre CSS est dans un sous-dossier, ajoutez aussi un @source pour components.

CSSglobal.css

@import "tailwindcss";
@import "uniwind";
@import "./components/beui-pro/beui/styles/theme.css";

3. Envelopper votre app

Importez global.css une fois et enveloppez l'app dans GestureHandlerRootView, nécessaire aux swipes, glisser-déposer et sheets.

TSXapp/_layout.tsx

import "../global.css";

import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack />
    </GestureHandlerRootView>
  );
}

4. Connecter le registry et installer

Les apps Expo ont besoin d'un components.json complet pour la CLI shadcn. Ajoutez celui-ci à la racine du projet, puis installez avec le BEUI_PRO_TOKEN de votre compte.

JSONcomponents.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "global.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@beui-pro": {
      "url": "https://pro.beui.dev/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${BEUI_PRO_TOKEN}"
      }
    }
  }
}

export BEUI_PRO_TOKEN="beui_live_xxxxxxxxxxxx"
npx shadcn@latest add @beui-pro/native-tab-bar

Les items arrivent dans components/beui-pro, à côté des fichiers beUI partagés qu'ils importent. Vous préférez des fichiers ? Téléchargez un item, ou tous, depuis le tableau de bord.

global.css
metro.config.js
components.json
components/
  beui-pro/
    premium/
      blocks/tab-bar/
    beui/
      hooks/
      styles/
        motion.ts
        theme.css

Ouvrir le tableau de bord Obtenir une licence Mobile

5. Charger Inter (facultatif)

Les items Pro définissent le texte avec font-sans-medium et des classes similaires. Pour correspondre aux clips, ajoutez ces familles après le thème dans global.css et chargez les quatre graisses avant le rendu. Ignorez cette étape pour utiliser la police système.

npx expo install @expo-google-fonts/inter expo-font

CSSglobal.css

@theme {
  --font-sans: "Inter_400Regular";
  --font-sans-medium: "Inter_500Medium";
  --font-sans-semibold: "Inter_600SemiBold";
  --font-sans-bold: "Inter_700Bold";
}

TSXapp/_layout.tsx

import {
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  useFonts,
} from "@expo-google-fonts/inter";

const [loaded] = useFonts({
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
});