Installation

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+

These versions are provided as a reference point. The components may work with newer or older versions, but compatibility is not guaranteed. We recommend starting with these versions if possible, or testing thoroughly if you're using different versions.

Install dependencies

The components are built on carefully selected core libraries. You'll need to install them to get the components working.

• Reanimated: Animation library that makes it easy to create smooth animations
• Gesture Handler: Provides native-driven gesture management APIs for building best possible touch-based experiences
• React Native SVG: Provides SVG support for images and icons
• Unistyles: This library is an extension of StyleSheet, and provides a set of tools and utilities to support theming, variants, breakpoints, etc.

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.

Locate and copy the folder craftrn-ui/themes at the root of your project, then import the unistyles.ts file in your App.tsx or app/_layout.tsx (Expo Router) file.

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

Add components

Now you're ready to add components to your project.

Locate and copy the components you need from craftrn-ui/components to your project within craftrn-ui/components, then import them wherever you need them.

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