Expert guidance for React Native apps using Expo Router, TypeScript, TanStack Query, and PostgreSQL. Handles mobile development, state management, and full-stack architecture.
Provides expert guidance for React Native mobile applications built with Expo Router, TypeScript, TanStack Query for state management, and PostgreSQL backend.
When working with this codebase, understand the following architecture:
```
GastOn/
├── mobile/ # React Native App
│ ├── app/ # Expo Router - file-based routing
│ │ ├── (tabs)/ # Tab group layout
│ │ │ ├── _layout.tsx # Tab navigation
│ │ │ ├── index.tsx # Weekly View
│ │ │ ├── manage.tsx # Categories management
│ │ │ └── balances.tsx # Balance dashboard
│ │ └── _layout.tsx # Root layout
│ └── src/
│ ├── components/ # Reusable components
│ ├── hooks/ # TanStack Query hooks
│ ├── services/ # API client functions
│ ├── types/ # TypeScript definitions
│ ├── utils/ # Utility functions
│ └── styles/ # Design system
├── base/ # Documentation
│ ├── Plan_1.md # Implementation plan
│ └── Proyecto.md # Project specs
└── backend/ # Express.js API
```
Use these import aliases consistently:
Execute commands from the `mobile/` directory:
```bash
npm start # Start Expo dev server
npm run android # Run on Android
npm run ios # Run on iOS
npm run web # Run in browser
npm test # Run tests
npm run lint # Lint code
npm run type-check # TypeScript check
```
Follow this sequence when implementing new features:
1. **Define Types** (`src/types/`)
- Create or update TypeScript interfaces
- Ensure proper type safety across the stack
2. **Create API Services** (`src/services/`)
- Implement API client functions
- Handle error cases and response parsing
3. **Build Custom Hooks** (`src/hooks/`)
- Use TanStack Query for server state
- Implement proper caching and invalidation
4. **Develop UI Components** (`src/components/`)
- Follow existing design patterns
- Use the established design system
5. **Integrate into Screens** (`app/(tabs)/`)
- Connect hooks to UI
- Implement user interactions
```typescript
// Expense with full details
interface ExpenseWithDetails {
id: number;
monto: number;
fecha: string; // YYYY-MM-DD format
categoria: Category;
nombre_gasto: ExpenseName;
descripcion?: string;
}
// Weekly organization
interface WeeklyData {
weekStart: string;
weekEnd: string;
days: DayExpenses[];
weekTotal: number;
}
```
Use TanStack Query for all server state:
```typescript
// Custom hook example
export function useExpenses() {
return useQuery({
queryKey: ['expenses'],
queryFn: fetchExpenses,
staleTime: 1000 * 60 * 5, // 5 minutes
});
}
// Mutation example
export function useCreateExpense() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: createExpense,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['expenses'] });
},
});
}
```
1. Run `npm run type-check` to verify TypeScript compilation
2. Run `npm run lint` to check code quality
3. Test on both iOS and Android when making UI changes
4. Ensure all API calls have proper error handling
```typescript
try {
const result = await apiService.operation();
return result;
} catch (error) {
console.error('Operation failed:', error);
// Show user-friendly error message
throw new Error('Operation failed. Please try again.');
}
```
Consult these files for detailed specifications:
1. Create new file in `app/(tabs)/` directory
2. Export default component with screen implementation
3. Update `_layout.tsx` to include new tab (if needed)
4. Add corresponding icon and label
1. Update `categorias` table schema
2. Add category to types in `src/types/`
3. Update color mappings in design system
4. Implement UI in Manage screen
1. Locate hook in `src/hooks/`
2. Adjust `staleTime`, `cacheTime`, or `refetchInterval`
3. Update invalidation logic in mutations
4. Test cache behavior thoroughly
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/react-native-expo-development-assistant/raw