expo-module

Files (1)

• SKILL.md

SKILL.md (first lines)

## Propósito

Crear features completos en MyQuota App siguiendo la arquitectura feature-first.

---

## Estructura de un Feature

```
src/features/<feature>/
├── components/           # Componentes UI del feature
│   └── FeatureCard.tsx
├── hooks/                # Custom hooks del feature
│   └── useFeatureData.ts
├── screens/              # Pantallas completas
│   └── FeatureScreen.tsx
├── services/             # Llamadas API
│   └── featureApi.ts
└── types/                # Tipos específicos del feature
    └── feature.ts
```

---

## Checklist para Nuevo Feature

1. [ ] Crear carpeta `src/features/<feature>/`
2. [ ] Crear `screens/FeatureScreen.tsx`
3. [ ] Crear `services/featureApi.ts` (si consume API)
4. [ ] Crear thin wrapper en `src/app/(drawer)/<feature>.tsx`
5. [ ] Registrar en `src/app/(drawer)/_layout.tsx` si visible en drawer
6. [ ] Crear tipos en `types/` o usar `shared/types/`

---

## Template: Screen

```tsx
// src/features/myFeature/screens/MyFeatureScreen.tsx
import React, { useState, useEffect, useCallback } from "react";
import {
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
  ScrollView,
} from "react-native";
import { colors, spacing } from "@/shared/theme/tokens";
import { getMyFeatureData } from "../services/myFeatureApi";
import { MyFeatureItem } from "@/shared/types/myFeature";

export default function MyFeatureScreen() {
  const [data, setData] = useState<MyFeatureItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const loadData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await getMyFeatureData();
      setData(result);
    } catch (err) {
      const message = err instanceof Error ? err.message : "Error inesperado";
      setError(message);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadData();
  }, [loadData]);

  if (loading) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator size="large" color={colors.primary} />
      </View>
    );
  }

  if (error) {
    return (
      <View style={styles.centered}>
        <Text style={styles.errorText}>{error}</Text>
      </View>
    );
  }

  return (
    <ScrollView style={styles.container}>
      {data.map((item) => (
        <View key={item.id} style={styles.item}>
          <Text>{item.name}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.bgLight,
  },
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  errorText: {
    color: colors.danger,
    fontSize: 16,
  },
  item: {
    padding: spacing.md,
    backgroundColor: colors.white,
    marginBottom: spacing.sm,

From cabrerojas/myquota-app, MIT.

More from cabrerojas/myquota-app