# Mobile React Native Setup Expo

> Imported TRAE skill from mobile/React_Native_Setup_Expo.md Use when this capability is needed.

- Skill: `tomevault-io/mobile-react-native-setup-expo` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/mobile-react-native-setup-expo`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/mobile-react-native-setup-expo/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/mobile-react-native-setup-expo

---


# Skill: React Native Setup (Expo)

## Purpose
To initialize a scalable, cross-platform mobile application using React Native and Expo, configured with TypeScript and standard linting tools.

## When to Use
- Starting a new mobile project for iOS and Android.
- Prototyping rapidly without complex native build setups.
- When needing access to native device features via a managed workflow.

## Procedure

### 1. Prerequisites
- Node.js (LTS) installed.
- Git installed.
- Expo CLI (optional globally, better via npx).
- Expo Go app on physical device (iOS/Android).

### 2. Initialization
Run the create command with the default TypeScript template:
```bash
npx create-expo-app@latest my-app --template default
```

### 3. Configuration
1.  **TypeScript**: Ensure `tsconfig.json` is present. If not, create an empty one and run `npx expo start` to auto-generate it.
2.  **Linting**:
    ```bash
    npm install --save-dev eslint @react-native-community/eslint-config prettier
    ```
    Create `.eslintrc.js`:
    ```javascript
    module.exports = {
      root: true,
      extends: '@react-native-community',
    };
    ```
3.  **Project Structure**:
    - `app/`: For Expo Router (if using file-based routing).
    - `components/`: Reusable UI components.
    - `assets/`: Images and fonts.
    - `constants/`: Theme colors and global config.

### 4. Running the Project
1.  Start the development server:
    ```bash
    npx expo start
    ```
2.  **Physical Device**: Scan the QR code with Expo Go.
3.  **Simulator**: Press `i` for iOS Simulator or `a` for Android Emulator (requires Xcode/Android Studio).

## Constraints
- **Native Modules**: If a library requires native code linking not supported by Expo Go, use "Development Builds" (`npx expo run:ios`).
- **File Size**: Keep assets optimized to reduce bundle size.

## Expected Output
A running React Native application on a simulator or device, with hot reloading enabled and TypeScript configured.

---
> Source: [Ditto190/crispy-nextjs-turborepo-monorepo](https://github.com/Ditto190/crispy-nextjs-turborepo-monorepo) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-22 -->