Installation

Get started with Crossbuild UI by following these installation steps for your Expo projects.

✔ Installing cbui-cli globally.
✔ Verifying installation.

✔ Initializing new Expo project 'my-expo-app'.
✔ Configuring project files.

Requirements

Before you begin, ensure your development environment meets the following prerequisites:

  • Expo: Currently, Crossbuild UI exclusively supports Expo managed workflow projects. We recommend using the latest stable version of Expo.
  • react-native-vector-icons: Many of our components rely on this library for icons. It's typically included in Expo projects, but ensure it's correctly set up.

Starting a New Project with Expo

The easiest way to start a new Expo project with Crossbuild UI pre-configured is by using our official CLI tool, cbui-cli.

Step 1: Install cbui-cli

Open your terminal and install the CLI globally using npm (or your preferred package manager like Yarn or pnpm):

$ npm install -g cbui-cli

Step 2: Authenticate the CLI

Log in to your Crossbuild UI account. This step is necessary to access certain features and components.

$ cbui-cli login

This command will open a browser window for you to authenticate. Follow the on-screen instructions.

Step 3: Initialize Your New Project

Once authenticated, you can create a new Expo project. The CLI will set up a project with a pre-configured template, including Crossbuild UI and other essential packages.

$ cbui-cli init my-expo-app@latest

Replace my-expo-app with your desired project name. Using @latest ensures you get the most recent template.

Step 4: Start Developing

Navigate into your new project directory and start the Expo development server:

$ cd my-expo-app

$ npx expo start

You're all set! Your new Expo project is ready with Crossbuild UI integrated.

Using Crossbuild UI in an Existing Expo Project

If you have an existing Expo project, you can install Crossbuild UI components individually using the cbui-cli.

Step 1: Install and Authenticate cbui-cli

If you haven't already, install and authenticate the CLI as shown in the previous section:

$ npm install -g cbui-cli

$ cbui-cli login

Step 2: Install Components

Navigate to your existing Expo project's root directory in the terminal. Then, use the CLI to install specific components. The CLI will handle dependencies and necessary configurations for the chosen component.

$ cbui-cli install @crossbuild/alert

Replace @crossbuild/alert with the actual name of the component you wish to install (e.g., @crossbuild/button).

After installation, you can import and use the component in your project files as per its documentation.

Introduction Theming