Skip to main content

​
Getting Started

GymApp uses Expo for development, providing a fast and efficient workflow with hot reload and debugging tools.

​
Starting the Development Server

1

Install Dependencies

First, install all project dependencies:
npm install
2

Start Expo Server

Launch the Expo development server:
npm start
This opens the Expo Dev Tools in your terminal with options to launch on different platforms.
3

Choose Your Platform

Run on your desired platform:
npm run ios      # Launch on iOS simulator
npm run android  # Launch on Android emulator
npm run web      # Launch in web browser

​
Development Options

​
Expo Go vs Development Builds

Expo Go (Recommended for Getting Started)
  • Quick setup - just scan QR code
  • No native build required
  • Great for JavaScript-only development
  • Limited to Expo SDK modules
Development Builds (For Custom Native Code)
  • Required if using custom native modules
  • Full control over native dependencies
  • Supports all React Native libraries
  • Requires native build tools (Xcode/Android Studio)
GymApp uses the New Architecture (newArchEnabled: true in app.json), which provides improved performance and enables features like concurrent rendering.

​
Hot Reload

Expo provides automatic hot reloading out of the box:
  • Fast Refresh: Automatically reloads when you save changes
  • Preserves State: Component state is maintained during reloads
  • Error Recovery: Automatically recovers from syntax errors
To manually reload:
  • iOS/Android: Shake device → “Reload”
  • Terminal: Press r to reload
  • Web: Standard browser refresh (Cmd+R / Ctrl+R)

​
Debugging

​
React DevTools

Access React DevTools from the Expo menu: 
# Press 'j' in terminal to open debugger
This provides:
  • Component hierarchy inspection
  • Props and state inspection
  • Performance profiling

​
Console Logging

View logs in your terminal where npm start is running. All console.log(), console.warn(), and console.error() statements appear here.

​
Debug Menu

Access the debug menu by:
  • iOS Simulator: Cmd+D
  • Android Emulator: Cmd+M (Mac) / Ctrl+M (Windows/Linux)
  • Physical Device: Shake the device
Options include:
  • Reload app
  • Toggle Performance Monitor
  • Toggle Element Inspector
  • Open React DevTools
The React Compiler experiment is enabled in this project (reactCompiler: true). This provides automatic memoization but may require adjustments if you see unexpected re-render behavior.

​
TypeScript Development

GymApp is built with TypeScript for type safety:

​
Typed Routes

Expo Router provides typed routes through the typedRoutes experiment: 
import { router } from 'expo-router';

// Type-safe navigation
router.push('/explore');
router.push('/(tabs)/index');

​
Type Checking

Run TypeScript type checking: 
npx tsc --noEmit

​
Linting

Check code quality with ESLint: 
npm run lint
Configure your editor (VS Code, WebStorm, etc.) to run ESLint and TypeScript on save for immediate feedback.

​
Project Structure

Key directories:
  • app/ - File-based routing with Expo Router
  • components/ - Reusable UI components
  • constants/ - Theme colors, fonts, and configuration
  • hooks/ - Custom React hooks
  • assets/ - Images, fonts, and other static resources

​
Environment Configuration

GymApp uses app.json for Expo configuration:
  • Scheme: Deep linking with acgymmobile://
  • Orientation: Portrait mode only
  • UI Style: Automatic dark/light mode
  • New Architecture: Enabled for performance

​
Common Tasks

​
Clearing Cache

If you encounter issues, clear the Expo cache: 
npm start -- --clear

​
Resetting Project

Reset to a clean state: 
npm run reset-project
This script may remove customizations. Review the script at scripts/reset-project.js before running.

​
Running on Physical Devices

1

Install Expo Go

Download Expo Go from the App Store (iOS) or Google Play (Android).
2

Connect to Same Network

Ensure your device and development machine are on the same Wi-Fi network.
3

Scan QR Code

Open Expo Go and scan the QR code shown in your terminal.

​
Performance Monitoring

​
React Native Performance Monitor

Enable the performance monitor from the debug menu to see:
  • JavaScript frame rate
  • UI frame rate
  • Memory usage

​
Reanimated Worklets

GymApp includes react-native-reanimated and react-native-worklets for smooth animations: 
import Animated from 'react-native-reanimated';

// Animations run on the UI thread for 60fps
Use react-native-reanimated for animations instead of Animated API for better performance.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us