t1k:rn:base:architecture

Field	Value
Module	`base`
Version	`1.7.4`
Effort	`medium`
Tools	—

Keywords: architecture, expo router, file-based routing, project structure, react native, typescript

How to invoke

/t1k:rn:base:architecture

RN Base Architecture

Project Structure (Expo Router)

app/
├── (tabs)/           # Tab group — shared tab bar
│   ├── _layout.tsx   # Tab navigator config
│   ├── index.tsx     # Home tab
│   └── profile.tsx   # Profile tab
├── _layout.tsx       # Root layout — providers, fonts, splash
├── +not-found.tsx    # 404 screen
components/           # Shared UI components
hooks/                # Custom hooks
store/                # Zustand stores
services/             # API calls, external services
constants/            # Colors, sizes, config
assets/               # Images, fonts

Root Layout Pattern

import { Stack } from 'expo-router';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="+not-found" />
    </Stack>
  );
}

TypeScript Config

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": { "@/*": ["./*"] }
  }
}

Key Rules

Always use strict: true in tsconfig
Path alias @/ for absolute imports — never use ../../..
Group routes with (groupName)/ — does not affect URL
Private routes with _ prefix — excluded from routing
Layouts in _layout.tsx — required at each route group level
Use expo-constants for env vars — never hardcode API URLs

Gotchas

expo-router requires expo-linking and react-native-safe-area-context
app/+html.tsx only runs on web — do not rely on for mobile
Dynamic segments: app/user/[id].tsx → useLocalSearchParams<{ id: string }>()
Always wrap root layout in <ThemeProvider> before <Stack>

Security

Store secrets in .env — never commit to git
Use expo-secure-store for sensitive user data (tokens, keys)
Validate all route params before use — treat as untrusted input