beUI Pro para móvil ya está disponible

Explorar
beUI Pro

Configuración de React Native

Configura tu app de Expo una vez y luego instala cualquier pantalla o bloque móvil desde el registry privado. La configuración sigue la guía gratuita de beUI Native, con las rutas donde se instalan los 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. Instala las bibliotecas

Cada item se anima con Reanimated y se estiliza con Uniwind. Instala con Expo para que las versiones coincidan con tu SDK. Algunos items necesitan más, como Skia o Bottom Sheet; cada página lo indica.

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

2. Configura Uniwind y el tema

Envuelve tu configuración de Metro con Uniwind. El preset de Babel de Expo añade el plugin de Worklets, así que las apps de Expo no necesitan cambios en 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",
});

Crea global.css en la raíz del proyecto. El import del tema apunta a los tokens que añade la primera instalación; si tu CSS está en una subcarpeta, añade también un @source para components.

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

3. Envuelve tu app

Importa global.css una vez y envuelve la app en GestureHandlerRootView, que necesitan los swipes, arrastres y 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. Conecta el registry e instala

Las apps de Expo necesitan un components.json completo para la CLI de shadcn. Añade este en la raíz del proyecto y luego instala con el BEUI_PRO_TOKEN de tu cuenta.

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

Los items se instalan en components/beui-pro, junto a los archivos compartidos de beUI que importan. ¿Prefieres archivos? Descarga cualquier item, o todos, desde el panel.

global.css
metro.config.js
components.json
components/
  beui-pro/
    premium/
      blocks/tab-bar/
    beui/
      hooks/
      styles/
        motion.ts
        theme.css
Abrir el panelConseguir una licencia Mobile

5. Carga Inter (opcional)

Los items Pro usan font-sans-medium y clases similares para el texto. Para que coincidan con los clips, añade estas familias después del tema en global.css y carga los cuatro pesos antes de renderizar. Sáltatelo para usar la fuente del sistema.

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,
});