Posted on Mar 2

TRAE for Expo / React Native Development

#trae #programming #expo #reactnative

This guide will show you how to set up and build a mobile app with Expo and React Native using TRAE IDE. Before diving in, here’s a quick introduction. TRAE IDE is an AI-powered development environment from ByteDance designed to be a smart coding companion. It offers real-time code suggestions, natural language code generation, chat-based assistance, and built-in project management and version control tools to help developers work more efficiently.

1. Prerequisites

Before getting started, make sure you have the following tools installed:

TRAE IDE (download from trae.ai)
Node.js (the LTS version is recommended)
Expo Go on your iOS or Android device
Xcode and iOS Simulator (Mac users only)
Android Emulator (available through Android Studio)

2. Create a new Expo Project

In your terminal, run create-expo-app@latest to generate the project, then open the newly created project folder in TRAE. For this guide we’ll create Pokémon Pokedex mobile app.

npx create-expo-app@latest trae-pokemon-app

trae trae-pokemon-app

3. Improving Your Development Workflow in TRAE

To improve your workflow in TRAE, consider installing the Expo Tools extension from the Extension Store. It provides helpful suggestions and documentation for Expo configuration files, and even offers live previews of native files generated during prebuild. 🚀

4. Running the Development Server

In the TRAE terminal, start the development server by running:

npm run start

If you want to launch the app directly, you can press “i” for iOS or “a” for Android when prompted.

Alternatively, you can open the simulator or emulator directly using one of the following commands:

npm run ios

for the iOS simulator, or

npm run android

for the Android emulator.

5. Prompting in TRAE

TRAE is very powerful, they have a lot of built-in SOTA models including the latest (at the time of this writing) Gemini 3 Pro and GPT 5.2 Codex.

For this project we’ll create a Pokémon Pokedex app which will list out the first 20 Pokémons. To spice 🌶️ things up we’ll also add “Items” tab to showcase Pokémon items.

Start with a simple prompt to describe the intent, imagine how you want the app to be and with that let TRAE handle the rest. You may also start with plan or spec mode with TRAE SOLO.

Build a pokemon pokedex screen to list out pokemons. The screen should have 2 tabs (Pokémon and Items). Show 20 max list per tab. Each list should have a thumbnail

Do note that the generation will take some time and once it’s done you will see the following files generated. For an overview, TRAE uses 14% of the 200K context which is available from Gemini 3 Pro model.

Once it generated run the project npm run ios or npm run android and you will see the Pokémon listing on landing page. Pretty 🔥 right.

Behind the scene TRAE automatically install the required dependencies for Expo / React Native so you can rest assured. You might be wondering why does it use “Dark Mode” by default? good question, actually it’s based on the OS level settings. When you toggle the theme from iOS / Android it will change the app theme by default, that’s what make Expo / React Native 🔥.

Tips: TRAE Custom Agent

TRAE allows you to create custom AI agents via intelligent generation or manual setup. You can configure them with specific prompts, MCP servers, and built-in tools for tasks like file management and web search. These agents can be shared, imported, and used to automate development workflows.

In this guide I am using the my custom agent called Developer, you may use this link to install it in your TRAE IDE https://s.trae.ai/a/2caf66.

8. Debugging in TRAE IDE

Debugging in TRAE is as easy as chatting with the AI agent. Let’s say we have an error when accessing “Items” tab, you may request the AI Agent to specify which file and line should it diagnose and resolve.

These are some of the prompts which you combine and mix-n-match together.

9. SKILLS in TRAE

In TRAE, Skills are reusable, specialized capabilities defined in SKILL.md files. They act as "professional instruction manuals" for your AI agent, providing structured guidance for specific tasks like code reviews or testing.

Unlike Rules (which are always loaded), Skills are loaded dynamically only when needed, saving tokens and reducing distraction. While an MCP Server provides tools to act, a Skill instructs the agent on how to use those tools effectively within a defined process.

Skills can be global (across projects) or project-specific, and are created manually, via chat, or by importing files. The agent can use them automatically based on context or be invoked manually via commands.

There are several skills which is recommended for Expo / React Native:

Installing SKILLS in TRAE IDE

Run this command to install skills in TRAE IDE.

npx skills add https://github.com/expo/skills --skill building-native-ui

Use “arrow keys” from the interactive terminal and press “space bar” to select, once finalized “enter” to install the SKILLS.

There are 2 installation scope “global” and “project”, generally it’s based on preference but “project” would be the ideal case for project scoped focus.

Do note that: TRAE's agent reads the skill's SKILL.md and automatically loads it when your request matches the "When to use" description.