Skip to main content
This quickstart guide will help you run GymApp on your development machine. By the end of this guide, you’ll have the app running on iOS Simulator, Android Emulator, or your web browser.
Make sure you’ve completed the installation guide before proceeding.

​
Start the Development Server

Navigate to your project directory and start the Expo development server: 
npm start
This will start the Metro bundler and display a QR code along with several options to launch the app.
Use npm start -- --clear to clear the bundler cache if you encounter any issues.

​
Choose Your Platform

​
Run on iOS Simulator

1

Launch iOS Simulator

With the development server running, press i in the terminal, or run:
npm run ios
This will automatically open the iOS Simulator and install the app.
2

Wait for Build

The first build may take a few minutes. You’ll see build progress in the terminal.
Subsequent builds will be much faster thanks to Metro’s caching.
3

App Launches

Once the build completes, the app will automatically launch on the simulator.You should see the GymApp home screen with a “Welcome!” message.

​
Test on Physical iOS Device

  1. Install Expo Go from the App Store
  2. Ensure your phone and computer are on the same Wi-Fi network
  3. Scan the QR code shown in the terminal with your iPhone camera
  4. Tap the notification to open in Expo Go
For production builds, you’ll need to create a development build instead of using Expo Go. See Deployment Guide for details.

​
Explore the App Structure

GymApp uses Expo Router for file-based routing. Here’s what you’ll find:

​
Main Entry Point

The root layout is defined in app/_layout.tsx:
app/_layout.tsx
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { useColorScheme } from '@/hooks/use-color-scheme';

export default function RootLayout() {
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
      </Stack>
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}

​
Tab Navigation

The app uses tab-based navigation with two main tabs:
  • Home (app/(tabs)/index.tsx) - Welcome screen
  • Explore (app/(tabs)/explore.tsx) - Features overview
There’s also a modal screen at app/modal.tsx demonstrating modal presentation.

​
Make Your First Edit

1

Open the Home Screen

Open app/(tabs)/index.tsx in your code editor.
2

Edit the Welcome Text

Find the welcome text and change it:
app/(tabs)/index.tsx
<ThemedText type="title">Welcome to GymApp!</ThemedText>
3

Save and See Changes

Save the file and watch the app reload automatically with your changes.
Fast Refresh will update the screen within seconds without losing app state.

​
Development Tools

​
Open Developer Menu

Access debugging tools with keyboard shortcuts:
  • iOS Simulator: Cmd + D
  • Android Emulator: Cmd + M (Mac) or Ctrl + M (Windows/Linux)
  • Web Browser: F12 or right-click and select “Inspect”

​
Available Tools

Reload App

Manually reload the entire app

Toggle Inspector

Inspect element layout and styles

Toggle Performance

Monitor frame rate and performance

Remote Debugging

Debug with Chrome DevTools

​
Run ESLint

GymApp includes ESLint configuration for code quality: 
npm run lint
The project uses eslint-config-expo for consistent React Native best practices.

​
Reset Project Template

The starter code includes example screens. When you’re ready to start fresh: 
npm run reset-project
This will:
  • Move the current app directory to app-example
  • Create a blank app directory for your code
  • Preserve all the example code for reference
This action cannot be undone. Make sure to commit any changes you want to keep before running this command.

​
Common Development Commands

Here are the most useful commands from package.json:
package.json
{
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "expo lint",
    "reset-project": "node ./scripts/reset-project.js"
  }
}

​
Next Steps

Now that you have GymApp running, explore these topics:

Project Structure

Learn how the codebase is organized

Routing

Understanding Expo Router file-based navigation

Theming

Theme system and styling components

Components

Explore reusable UI components

​
Troubleshooting

  • Try refreshing manually from the developer menu
  • Restart the development server with --clear flag
  • Check that you’re editing the correct file
  • Ensure your device/emulator and computer are on the same network
  • Check that port 8081 is not blocked by a firewall
  • Try using --tunnel flag: npm start -- --tunnel
  • Reset the simulator: Device > Erase All Content and Settings
  • Run npx expo start --clear to clear cache
  • Check Xcode is properly installed: xcode-select -p
  • Clean the Android build: cd android && ./gradlew clean && cd ..
  • Check Java version: java -version (should be 17)
  • Ensure ANDROID_HOME environment variable is set
For more help, refer to the Expo documentation or join the Expo Discord community.

Build docs developers (and LLMs) love

Get started for freeTalk to us