Installation guide

Prerequisites

Before installing the templates, make sure you have:

1. Completed the components installation guide
2. Ensured that all components are downloaded and present in your project

Our templates require the following minimum dependency versions:

• Expo Router 5+
• React 19+
• React Native 0.79+
• Node.js 22+
• TypeScript 5.3+

These versions ensure compatibility with our template features. We recommend using the latest stable versions within these major versions.

Project Configuration

To use our templates effectively, you'll need to set up path aliases. These make your imports cleaner and easier to manage. Here's what you need to do:

1. Configure TypeScript

First, let's set up TypeScript to understand our path aliases. Add this to your tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./app",
    "paths": {
      "~/craftrn-ui/*": ["./craftrn-ui/*"]
    }
  }
}

2. Configure Babel

Next, update your Babel configuration to support:

• Path aliases for cleaner imports
• React Native Reanimated animations

Add these settings to your babel.config.json:

{
  "plugins": [
    [
      "babel-plugin-root-import",
      {
        "paths": [
          {
            "rootPathPrefix": "@",
            "rootPathSuffix": "./"
          }
        ]
      }
    ],
    "react-native-reanimated/plugin"
  ],
  "presets": ["module:@react-native/babel-preset"]
}

Add templates to your project

Now we'll walk through the process of integrating the templates into your codebase:

1. Copy the template files

• Visit the craftrn-templates repository
• Download the templates you want to use
• Create a new folder called craftrn-templates at the root of your project
• Copy the downloaded templates into this folder

2. Set up the routes

• If you're using Expo Router:
  • Visit the app folder in the repository
  • Copy the folder for your chosen templates
  • Paste them into your project's app folder
• If you're using a different navigation library:
  • You'll need to adapt the routing logic to match your navigation setup
  • You can them import each screen individually from the craftrn-templates folder

Your project structure should look like this when using Expo: