Skip to main content
GymApp follows the standard Expo + React Native project structure with file-based routing powered by Expo Router.

​
Directory Overview

The project uses TypeScript throughout, with .tsx for components and .ts for utilities.
acgym-mobile/
├── app/                    # File-based routing directory
│   ├── (tabs)/            # Tab navigation group
│   │   ├── _layout.tsx    # Tab navigator configuration
│   │   ├── index.tsx      # Home screen
│   │   └── explore.tsx    # Explore screen
│   ├── _layout.tsx        # Root layout
│   └── modal.tsx          # Modal screen
├── assets/                # Static assets
│   └── images/           # Image resources
├── components/            # Reusable components
│   ├── ui/               # UI primitives
│   ├── themed-text.tsx   # Theme-aware text component
│   ├── themed-view.tsx   # Theme-aware view component
│   └── ...
├── constants/             # App constants
│   └── theme.ts          # Color and font definitions
├── hooks/                 # Custom React hooks
│   ├── use-color-scheme.ts
│   └── use-theme-color.ts
└── scripts/              # Utility scripts

​
Key Directories

The app/ directory contains all your screens and implements Expo Router’s file-based routing.
  • Each file automatically becomes a route
  • Folders with () are route groups that don’t affect the URL
  • Files named _layout.tsx define nested layouts
  • Files named index.tsx are the default route in that directory
Example from the project:
// app/_layout.tsx - Root layout
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>
  );
}
Contains all reusable React components organized by purpose:
  • UI components (components/ui/): Low-level primitives like icons and collapsibles
  • Themed components: Components that automatically adapt to light/dark mode
  • Feature components: Complex components like ParallaxScrollView, HelloWave
All components use TypeScript for type safety and support theme customization through props.
Houses app-wide constants including:
  • theme.ts: Color palettes and font definitions for light and dark modes
  • Future constants for API endpoints, feature flags, etc.
// constants/theme.ts
export const Colors = {
  light: {
    text: '#11181C',
    background: '#fff',
    tint: '#0a7ea4',
    icon: '#687076',
    tabIconDefault: '#687076',
    tabIconSelected: '#0a7ea4',
  },
  dark: {
    text: '#ECEDEE',
    background: '#151718',
    tint: '#fff',
    icon: '#9BA1A6',
    tabIconDefault: '#9BA1A6',
    tabIconSelected: '#fff',
  },
};
Custom React hooks for common functionality:
  • use-color-scheme.ts: Detects system color scheme (light/dark)
  • use-theme-color.ts: Returns themed colors based on current scheme
  • Platform-specific variants (e.g., use-color-scheme.web.ts)
These hooks enable automatic theme switching throughout the app.

​
File Naming Conventions

  • Use kebab-case: themed-text.tsx, haptic-tab.tsx
  • Platform-specific: icon-symbol.ios.tsx
  • Folders for related components: components/ui/

​
TypeScript Configuration

The project uses path aliases for cleaner imports: 
// tsconfig.json includes:
{
  "paths": {
    "@/*": ["./*"]
  }
}
This allows you to import with @/ instead of relative paths: 
import { Colors } from '@/constants/theme';
import { ThemedText } from '@/components/themed-text';
import { useColorScheme } from '@/hooks/use-color-scheme';
Always use the @/ alias for imports within the project. This makes refactoring easier and prevents broken import paths.

​
Package Structure

Key dependencies from package.json: 
{
  "name": "acgym-mobile",
  "main": "expo-router/entry",
  "dependencies": {
    "expo": "~54.0.13",
    "expo-router": "~6.0.11",
    "react": "19.1.0",
    "react-native": "0.81.4",
    "react-native-reanimated": "~4.1.1"
  }
}

​
Next Steps

Routing

Learn how file-based routing works in GymApp

Theming

Understand the theming system and color schemes

Build docs developers (and LLMs) love

Get started for freeTalk to us