FlexNative CLI

The FlexNative CLI is your one-stop solution to quickly set up and integrate FlexNative UI into your React Native + Expo projects.

Introduction

The FlexNative CLI simplifies the development process by offering commands that handle project configuration, theming, and component integration. Whether you're starting a new project or adding components to an existing one, the CLI saves time and ensures consistency.

This guide focuses on the init command, which initializes your project with essential configurations and base files.

Command: init

The init command is the starting point for setting up a FlexNative project. It performs the following tasks:

  1. Configures paths: Maps @/* to your desired folder (e.g., ./src/*).
  2. Creates theme files: Sets up essential files for colors, themes, and hooks.
  3. Ensures consistency: Generates a flexnative.json file to centralize configurations.

Terminal
npx flexnative-cli@latest init

Interactive Setup

When you run the command, the CLI will guide you through a series of prompts to configure your project:


Terminal
Where is your tsconfig.json? (tsconfig.json) 
What path should map to '@/*'? (./src/*)
Which theme do you want to use for now? (default)

Output

After completing the prompts, the CLI will generate and update the necessary files, confirming the results in the terminal:


Terminal
✅ Created/updated flexnative.json
✅ Created: constants/colors.ts
✅ Created: hooks/theme/use-color-scheme.ts
✅ Created: theme/theme-colors.ts

🎉 Init finished!

Why Use the CLI?

Using the CLI streamlines your workflow by automating repetitive setup tasks. Here’s why it’s valuable:

  • Faster Setup: Get started in minutes with pre-configured files and settings.
  • Consistency: Maintain uniformity across projects with the same structure and theming approach.
  • Customizable: Adjust paths and themes based on your project’s requirements.

Next Steps

Once the init command is complete, you’re ready to start building with FlexNative UI. Here are some helpful guides to continue:

  • Styling Approach: Learn about FlexNative’s styling options.
  • Components: Discover reusable components and their APIs.
  • Theming: Customize your project with dynamic themes.