Installation guide

Prerequisites

The components have been tested with the following versions of key dependencies:

• React 18.3+
• React Native 0.76+
• Node.js 22+
• TypeScript 5.3+

While the components might work with different versions, we've thoroughly tested and optimized them for these specific versions. For the best experience and to avoid potential compatibility issues:

• Use the versions listed above when starting a new project
• If using different versions, thoroughly test your application

Install dependencies

The components are built on several essential dependencies that provide core functionality. To get started, you'll need to install these foundational libraries:

Install all required dependencies with this command:

npm install react-native-reanimated@^3 react-native-gesture-handler@^2 react-native-svg@^14 react-native-unistyles@^2

To learn more about those libraries, head to the Reanimated, Gesture Handler, SVG and Unistyles documentation.

Unistyles configuration

All components use Unistyles for styling.

First, locate and copy the folder craftrn-ui/themes to the root of your project.

Then, import the unistyles.ts file in your app's entry point:

• For React Native CLI projects, import it in App.tsx or index.ts
• For Expo projects, import it in App.tsx or app/_layout.tsx (if using Expo Router)

The import should look like this:

import "./craftrn-ui/themes/unistyles";

Add components

With the dependencies and configuration in place, you can now add the components to your project. Follow these steps:

1. Navigate to craftrn-ui/components in the repository
2. Choose the components you want to use in your project
3. Copy the selected component folders to your project's craftrn-ui/components directory
4. Import and use the components in your application code

If you use Expo, your project should look like this: