Expo

Create project

npx create-expo-app@latest

Configure path aliases

Edit tsconfig.json file

{
  "compilerOptions": {
    // ...
    "paths": { 
      "@/*": ["./*"] 
    } 
    // ...
  }
}

Configure fonts

Download the Inter font from here: https://rsms.me/inter/
Copy the Inter-Regular.ttf, Inter-Medium.ttf, Inter-SemiBold.ttf, Inter-Bold.ttf and InterDisplay-ExtraBold.ttf files from the ttf folder and paste them in the assets/fonts folder.
Edit app.json file:

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": [
            "./assets/fonts/Inter-Regular.ttf", 
            "./assets/fonts/Inter-Medium.ttf",  
            "./assets/fonts/Inter-SemiBold.ttf",    
            "./assets/fonts/Inter-Bold.ttf",    
            "./assets/fonts/InterDisplay-ExtraBold.ttf"
          ]
        }
      ]
    ]
  }
}

Run the CLI

npx saaj init

Configure components.json

You will be asked a few questions to configure components.json:

- Where would you like to keep your components? > components/ui
- Where would you like to keep your hooks? > hooks
- Where would you like to keep your utils? > utils
- Where would you like to keep your types? > types
- Where would you like to keep your themes configuration? > styles

Setup Icons

Add Icon component.

npx saaj add Icon

In your app.json file, add the following line:

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": [
            // ...
            "./node_modules/@react-native-vector-icons/ionicons/fonts/Ionicons.ttf"
          ]
        }
      ]
    ]
  }
}

Import Unistyles

Import unistyles.ts file in the root file of your project.

app/_layout.tsx

import "@/styles/unistyles";

Run your application

Generate native directories

npx expo prebuild --clean

Build and start your application

npx expo run:ios

All Set!

You can now start adding components to your app.

Expo

On this page