Project Structure

NearYou follows a file-based routing structure powered by Expo Router. This guide explains the organization of the codebase and how different parts work together.

Directory Overview

The project is organized into several key directories under src/:

src/
├── app/              # File-based routing (screens)
├── components/       # Reusable React components
├── constants/        # Theme, colors, and constants
├── hooks/            # Custom React hooks
└── scripts/          # Build and utility scripts

App Directory

The app/ directory uses Expo Router’s file-based routing system. Each file automatically becomes a route in your application.

Route Structure

Main Layout

File: src/app/_layout.tsxThe root layout configures the navigation theme and sets up the main stack navigator:

src/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>
  );
}

Key features:

Automatic theme switching based on device settings
Stack navigation with tab and modal screens
Global status bar configuration

Directory: src/app/(tabs)/The (tabs) directory contains the main tabbed navigation structure. Parentheses indicate a route group that doesn’t add a path segment.Routes:

index.tsx - Home screen (accessed at /)
explore.tsx - Explore screen (accessed at /explore)
_layout.tsx - Tab navigation configuration

File: src/app/modal.tsxModal screens are presented on top of the main navigation stack with a modal presentation style.

Components Directory

Reusable components are organized by functionality:

Core Components
Layout Components
Interactive Components

ThemedText

File: src/components/themed-text.tsxA text component that automatically adapts to light and dark themes:

import { ThemedText } from '@/components/themed-text';

<ThemedText type="title">Welcome!</ThemedText>
<ThemedText type="subtitle">Section Title</ThemedText>
<ThemedText type="link">Click here</ThemedText>

Available types:

default - Standard body text (16px)
title - Large heading (32px, bold)
defaultSemiBold - Semibold body text (16px)
subtitle - Section heading (20px, bold)
link - Link styled text

ThemedView

File: src/components/themed-view.tsxA view container with automatic theme-aware background colors:

import { ThemedView } from '@/components/themed-view';

<ThemedView style={styles.container}>
  {/* Content */}
</ThemedView>

ParallaxScrollView

File: src/components/parallax-scroll-view.tsxA scroll view with animated parallax header:

import ParallaxScrollView from '@/components/parallax-scroll-view';
import { Image } from 'expo-image';

<ParallaxScrollView
  headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
  headerImage={
    <Image
      source={require('@assets/images/header.png')}
      style={styles.headerImage}
    />
  }>
  {/* Scrollable content */}
</ParallaxScrollView>

Features:

250px header height
Smooth parallax animation on scroll
Automatic theme-aware background
Scale and translate effects

HapticTab

File: src/components/haptic-tab.tsxProvides haptic feedback on iOS when pressing tab buttons:

import { HapticTab } from '@/components/haptic-tab';

<Tabs screenOptions={{ tabBarButton: HapticTab }}>
  {/* Tab screens */}
</Tabs>

ExternalLink

File: src/components/external-link.tsxOpens links in an in-app browser on native platforms:

import { ExternalLink } from '@/components/external-link';

<ExternalLink href="https://example.com">
  <ThemedText type="link">Visit Website</ThemedText>
</ExternalLink>

UI Components

Directory: src/components/ui/ Specialized UI components:

IconSymbol

Cross-platform icon component using SF Symbols (iOS) and Material Icons (Android/Web)

Collapsible

Expandable/collapsible content sections

Constants Directory

Application-wide constants and configuration: File: src/constants/theme.ts Contains color schemes and font definitions. See Theme System for details.

Hooks Directory

Custom React hooks for common functionality:

useColorScheme

File: src/hooks/use-color-scheme.tsDetects the device color scheme:

import { useColorScheme } from '@/hooks/use-color-scheme';

function MyComponent() {
  const colorScheme = useColorScheme(); // 'light' | 'dark'
  // ...
}

useThemeColor

File: src/hooks/use-theme-color.tsGets theme-specific colors with optional overrides:

import { useThemeColor } from '@/hooks/use-theme-color';

function MyComponent() {
  const backgroundColor = useThemeColor(
    { light: '#fff', dark: '#000' },
    'background'
  );
  // ...
}

Path Aliases

The project uses TypeScript path aliases for clean imports:

// Instead of:
import { ThemedText } from '../../../components/themed-text';

// Use:
import { ThemedText } from '@/components/themed-text';
import image from '@assets/images/logo.png';

Configured aliases:

@/ → src/
@assets/ → assets/

File Naming Conventions

Follow these conventions for consistency:

Components: kebab-case (e.g., themed-text.tsx)
Screens: kebab-case (e.g., index.tsx, explore.tsx)
Hooks: kebab-case with use- prefix (e.g., use-color-scheme.ts)
Constants: kebab-case (e.g., theme.ts)
Types: PascalCase for interfaces and types

Key Dependencies

The project relies on these core libraries:

Package	Purpose
`expo-router`	File-based navigation
`react-native-reanimated`	Smooth animations
`expo-haptics`	Haptic feedback
`expo-symbols`	SF Symbols support
`@expo/vector-icons`	Icon library

Next Steps

Theme System

Learn about colors and theming

Navigation

Configure routes and navigation

Components

Explore available components

Get Started

Core Features

Development

Guides

Project Structure

Directory Overview

App Directory

Main Layout

Tab Navigation

Components Directory

ThemedText

ThemedView

ParallaxScrollView

HapticTab

ExternalLink

UI Components

IconSymbol

Collapsible

Constants Directory

Hooks Directory

Path Aliases

File Naming Conventions

Key Dependencies

Next Steps

Theme System

Navigation

Components

Build docs developers (and LLMs) love

Get Started

Core Features

Development

Guides

​Directory Overview

​App Directory

​Main Layout

​Tab Navigation

​Modal Routes

​Components Directory

​ThemedText

​ThemedView

​ParallaxScrollView

​HapticTab

​ExternalLink

​UI Components

IconSymbol

Collapsible

​Constants Directory

​Hooks Directory

​Path Aliases

​File Naming Conventions

​Key Dependencies

​Next Steps

Theme System

Navigation

Components

Build docs developers (and LLMs) love

Directory Overview

App Directory

Main Layout

Tab Navigation

Modal Routes

Components Directory

ThemedText

ThemedView

ParallaxScrollView

HapticTab

ExternalLink

UI Components

Constants Directory

Hooks Directory

Path Aliases

File Naming Conventions

Key Dependencies

Next Steps