Skip to main content
The RIS Gran Chimú mobile app follows a well-organized structure that separates routing, components, business logic, and services.

​
Directory Overview

├── app/                  # Routes of the App (Expo Router)
│   ├── (auth)/           # Login and Recovery screens
│   ├── (main)/           # Centralized dashboard by roles
│   │   └── dashboard/    # Admin, Editor, and Management
│   ├── landing/          # Public screens (Home, News)
│   │   ├── index.tsx     # Landing home with news carousel
│   │   ├── noticias.tsx  # Institutional news viewer
│   │   └── contacto.tsx  # Citizen service channels
│   ├── external/         # External public pages
│   ├── _layout.tsx       # Global navigation configuration
│   └── index.tsx         # Entry point (Main Landing)
├── src/
│   ├── components/       # Shared UI elements
│   ├── hooks/            # useAuth, useDebounce, useThemeColor
│   ├── services/         # apiClient (Axios) and authService
│   ├── types/            # TypeScript definitions (Auth, Noticia)
│   └── context/          # Permissions and Preferences contexts
├── assets/               # Logos, Images, and Splash Screen
├── app.json              # Expo and EAS configuration
└── package.json          # Dependencies and build scripts

​
app/ Directory

The app/ directory contains all routes and screens using Expo Router’s file-based routing system.

​
Route Groups

Contains login and authentication-related screens.Files:
  • login-admin.tsx - Admin/Editor login screen
Route groups in parentheses like (auth) don’t affect the URL path.
Protected routes that require authentication. Contains role-based dashboards.Structure:
(main)/
├── _layout.tsx                    # Auth guard for protected routes
└── dashboard/
    ├── index.tsx                  # Unified dashboard entry
    ├── admin/
    │   ├── index.tsx             # Admin dashboard
    │   └── users/index.tsx       # User management
    ├── editor/
    │   └── index.tsx             # Editor dashboard
    └── manage/
        ├── establecimientos/     # Health facilities management
        ├── estrategias/          # Health strategies management
        ├── normas/               # Regulations management
        ├── noticias/             # News management
        ├── roles/                # Role management
        └── servicios/            # Services management
The _layout.tsx file acts as an authentication guard:
app/(main)/_layout.tsx
export default function MainLayout() {
  const { user, loading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !user) {
      console.log('❌ [MainLayout] No user → redirecting to home..');
      router.replace('/landing');
    }
  }, [user, loading]);

  if (loading) return null;

  return (
    <PermissionProvider>
      <Stack />
    </PermissionProvider>
  );
}
Public-facing screens accessible without authentication.Files:
  • index.tsx - Landing home with news carousel
  • estrategias.tsx - Health strategies information
  • establecimientos.tsx - Health facilities directory
  • transparencia.tsx - Transparency portal
  • contacto.tsx - Contact information
  • _layout.tsx - Tab navigation layout
Uses tab navigation with custom icons from lucide-react-native.
Standalone pages for specific public information.Files:
  • normas-publicas.tsx - Public regulations viewer

​
Root Files

import { AuthProvider } from '@/src/hooks/useAuth';
import * as NavigationBar from 'expo-navigation-bar';
import { Slot } from 'expo-router';

export default function RootLayout() {
  useEffect(() => {
    if (Platform.OS === 'android') {
      NavigationBar.setBackgroundColorAsync('white');
      NavigationBar.setButtonStyleAsync('dark');
    }
  }, []);

  return (
    <SafeAreaProvider>
      <AuthProvider>
        <Slot />
      </AuthProvider>
    </SafeAreaProvider>
  );
}

​
src/ Directory

The src/ directory contains all business logic, components, and utilities.

​
components/

Reusable UI components shared across the app. Files:
  • ThemedText.tsx - Text component with theme support
  • ThemedView.tsx - View component with theme support
  • dashboard/ - Dashboard-specific components

​
hooks/

Custom React hooks for reusable logic.

useAuth.tsx

Authentication state management, login/logout, token lifecycle

useDebounce.ts

Debounce values for search inputs

useThemeColor.ts

Theme color management

useFetchNormas.ts

Fetch and manage regulations data

useColorScheme.ts

Detect system color scheme

​
services/

API clients and external service integrations. Files:
  • apiClient.ts - Axios instance with base configuration and token management
  • authService.ts - Authentication service utilities
src/services/apiClient.ts
const BASE_URL = 'https://ris-gran-chimu-backend.vercel.app/api';

const apiClient = axios.create({
  baseURL: BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

export const setAuthToken = (token: string | null) => {
  if (token) {
    apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  } else {
    delete apiClient.defaults.headers.common['Authorization'];
  }
};

​
types/

TypeScript type definitions for type safety. Files:
  • auth.ts - Authentication types (LoginResponse, User)
  • Norma.ts - Regulation types
  • User.ts - User model types
src/types/auth.ts
export type LoginResponse = {
  user: {
    id: number;
    nombre: string;
    email: string;
    rol: 'admin' | 'editor';
  };
  token: string;
};

​
context/

React Context providers for global state. Files:
  • PermissionContext.tsx - Role-based permission management

​
assets/ Directory

Static assets including images, logos, and splash screens. 
assets/
├── images/
├── icons/
└── splash/

​
Configuration Files

​
app.json

Expo and EAS Build configuration: 
{
  "expo": {
    "name": "RIS Gran Chimú",
    "slug": "ris-gran-chimu",
    "version": "1.0.0",
    "orientation": "portrait",
    "platforms": ["ios", "android", "web"]
  }
}

​
package.json

Dependencies and scripts: 
{
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  }
}

​
Best Practices

Route Organization: Use route groups (groupName) to organize screens without affecting URLs
Component Reusability: Keep shared components in src/components/
Type Safety: Define types in src/types/ and import across the app
Service Layer: Centralize API calls in src/services/
Custom Hooks: Extract reusable logic into hooks in src/hooks/

​
Next Steps

Routing

Learn about Expo Router implementation

Authentication

Understand the authentication flow

Build docs developers (and LLMs) love

Get started for freeTalk to us