elsabro 2.0.1 → 2.2.0

package/skills/mobile-app.md

@@ -0,0 +1,813 @@
+---
+name: mobile-app
+description: Crear app movil con Expo SDK 52+, React Navigation, Expo Router, NativeWind para styling, push notifications y deep linking.
+tags: [expo, react-native, mobile, ios, android, nativewind, push-notifications]
+difficulty: intermediate
+estimated_time: 45min
+---
+
+# Skill: Mobile App
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "app movil"
+- "app para iOS/Android"
+- "React Native"
+- "Expo"
+- "aplicacion nativa"
+</when_to_use>
+
+<pre_requisites>
+## Pre-requisitos
+
+- Node.js 20+
+- Expo CLI: `npm install -g expo-cli`
+- Expo Go app en dispositivo (para testing)
+- Para builds nativos: Xcode (iOS) y/o Android Studio
+</pre_requisites>
+
+<project_structure>
+## Estructura de Proyecto
+
+```
+my-mobile-app/
+├── app/
+│   ├── (tabs)/
+│   │   ├── _layout.tsx        # Tab navigator
+│   │   ├── index.tsx          # Home tab
+│   │   ├── explore.tsx        # Explore tab
+│   │   └── profile.tsx        # Profile tab
+│   ├── (auth)/
+│   │   ├── login.tsx
+│   │   └── register.tsx
+│   ├── [id].tsx               # Dynamic route
+│   ├── _layout.tsx            # Root layout
+│   └── +not-found.tsx         # 404 page
+├── components/
+│   ├── ui/
+│   │   ├── Button.tsx
+│   │   ├── Input.tsx
+│   │   └── Card.tsx
+│   └── ThemedView.tsx
+├── hooks/
+│   ├── useAuth.ts
+│   └── useNotifications.ts
+├── stores/
+│   └── authStore.ts           # Zustand store
+├── services/
+│   └── api.ts                 # API client
+├── constants/
+│   └── Colors.ts
+├── assets/
+│   ├── fonts/
+│   └── images/
+├── app.json                   # Expo config
+├── tailwind.config.js         # NativeWind config
+├── babel.config.js
+├── metro.config.js
+└── package.json
+```
+</project_structure>
+
+<setup_steps>
+## Pasos de Setup
+
+### Paso 1: Crear proyecto Expo
+
+```bash
+npx create-expo-app@latest my-mobile-app --template tabs
+cd my-mobile-app
+```
+
+### Paso 2: Instalar dependencias
+
+```bash
+# NativeWind (Tailwind para React Native)
+npm install nativewind tailwindcss
+npx tailwindcss init
+
+# Estado global
+npm install zustand
+
+# Navegacion adicional
+npm install @react-navigation/native @react-navigation/stack
+
+# Storage persistente
+npm install @react-native-async-storage/async-storage
+
+# Push notifications
+npx expo install expo-notifications expo-device expo-constants
+
+# Linking
+npx expo install expo-linking
+```
+
+### Paso 3: Configurar NativeWind
+
+Editar `tailwind.config.js`:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,jsx,ts,tsx}",
+    "./components/**/*.{js,jsx,ts,tsx}",
+  ],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      colors: {
+        primary: "#007AFF",
+        secondary: "#5856D6",
+      },
+    },
+  },
+  plugins: [],
+};
+```
+
+Editar `babel.config.js`:
+
+```javascript
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};
+```
+
+Crear `global.css`:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Actualizar `app/_layout.tsx`:
+
+```typescript
+import "../global.css";
+import { Stack } from "expo-router";
+import { useColorScheme } from "react-native";
+
+export default function RootLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: colorScheme === "dark" ? "#000" : "#fff",
+        },
+        headerTintColor: colorScheme === "dark" ? "#fff" : "#000",
+      }}
+    >
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen name="(auth)" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+```
+
+### Paso 4: Crear store de autenticacion
+
+Crear `stores/authStore.ts`:
+
+```typescript
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+}
+
+interface AuthState {
+  user: User | null;
+  token: string | null;
+  isLoading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+  setUser: (user: User) => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      token: null,
+      isLoading: false,
+
+      login: async (email, password) => {
+        set({ isLoading: true });
+        try {
+          // Llamar a tu API
+          const response = await fetch("https://api.example.com/login", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ email, password }),
+          });
+          const data = await response.json();
+
+          set({
+            user: data.user,
+            token: data.token,
+            isLoading: false,
+          });
+        } catch (error) {
+          set({ isLoading: false });
+          throw error;
+        }
+      },
+
+      logout: () => {
+        set({ user: null, token: null });
+      },
+
+      setUser: (user) => set({ user }),
+    }),
+    {
+      name: "auth-storage",
+      storage: createJSONStorage(() => AsyncStorage),
+    }
+  )
+);
+```
+
+### Paso 5: Crear componentes UI
+
+Crear `components/ui/Button.tsx`:
+
+```typescript
+import { TouchableOpacity, Text, ActivityIndicator } from "react-native";
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: "primary" | "secondary" | "outline";
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+export function Button({
+  title,
+  onPress,
+  variant = "primary",
+  loading = false,
+  disabled = false,
+}: ButtonProps) {
+  const baseClasses = "py-3 px-6 rounded-xl items-center justify-center";
+
+  const variantClasses = {
+    primary: "bg-primary",
+    secondary: "bg-secondary",
+    outline: "border-2 border-primary bg-transparent",
+  };
+
+  const textClasses = {
+    primary: "text-white font-semibold text-base",
+    secondary: "text-white font-semibold text-base",
+    outline: "text-primary font-semibold text-base",
+  };
+
+  return (
+    <TouchableOpacity
+      className={`${baseClasses} ${variantClasses[variant]} ${
+        disabled ? "opacity-50" : ""
+      }`}
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.8}
+    >
+      {loading ? (
+        <ActivityIndicator color={variant === "outline" ? "#007AFF" : "#fff"} />
+      ) : (
+        <Text className={textClasses[variant]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+}
+```
+
+Crear `components/ui/Input.tsx`:
+
+```typescript
+import { View, TextInput, Text } from "react-native";
+import { useState } from "react";
+
+interface InputProps {
+  label?: string;
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  secureTextEntry?: boolean;
+  error?: string;
+  keyboardType?: "default" | "email-address" | "numeric";
+}
+
+export function Input({
+  label,
+  placeholder,
+  value,
+  onChangeText,
+  secureTextEntry = false,
+  error,
+  keyboardType = "default",
+}: InputProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <View className="mb-4">
+      {label && (
+        <Text className="text-gray-700 font-medium mb-1 dark:text-gray-300">
+          {label}
+        </Text>
+      )}
+      <TextInput
+        className={`bg-gray-100 dark:bg-gray-800 px-4 py-3 rounded-xl text-base ${
+          isFocused ? "border-2 border-primary" : "border-2 border-transparent"
+        } ${error ? "border-red-500" : ""}`}
+        placeholder={placeholder}
+        placeholderTextColor="#9CA3AF"
+        value={value}
+        onChangeText={onChangeText}
+        secureTextEntry={secureTextEntry}
+        keyboardType={keyboardType}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
+      {error && <Text className="text-red-500 text-sm mt-1">{error}</Text>}
+    </View>
+  );
+}
+```
+
+### Paso 6: Crear pantalla de login
+
+Crear `app/(auth)/login.tsx`:
+
+```typescript
+import { View, Text, KeyboardAvoidingView, Platform } from "react-native";
+import { useState } from "react";
+import { router } from "expo-router";
+import { useAuthStore } from "@/stores/authStore";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+
+export default function LoginScreen() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const { login, isLoading } = useAuthStore();
+
+  const handleLogin = async () => {
+    try {
+      setError("");
+      await login(email, password);
+      router.replace("/(tabs)");
+    } catch (err) {
+      setError("Credenciales invalidas");
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      className="flex-1 bg-white dark:bg-gray-900"
+    >
+      <View className="flex-1 justify-center px-6">
+        <Text className="text-3xl font-bold text-center mb-8 dark:text-white">
+          Bienvenido
+        </Text>
+
+        {error && (
+          <View className="bg-red-100 p-3 rounded-lg mb-4">
+            <Text className="text-red-600 text-center">{error}</Text>
+          </View>
+        )}
+
+        <Input
+          label="Email"
+          placeholder="tu@email.com"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+        />
+
+        <Input
+          label="Password"
+          placeholder="********"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+        />
+
+        <View className="mt-6">
+          <Button
+            title="Iniciar Sesion"
+            onPress={handleLogin}
+            loading={isLoading}
+          />
+        </View>
+
+        <Text
+          className="text-center mt-4 text-gray-600 dark:text-gray-400"
+          onPress={() => router.push("/(auth)/register")}
+        >
+          No tienes cuenta?{" "}
+          <Text className="text-primary font-semibold">Registrate</Text>
+        </Text>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+```
+
+### Paso 7: Configurar push notifications
+
+Crear `hooks/useNotifications.ts`:
+
+```typescript
+import { useEffect, useRef, useState } from "react";
+import * as Notifications from "expo-notifications";
+import * as Device from "expo-device";
+import Constants from "expo-constants";
+import { Platform } from "react-native";
+
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: true,
+  }),
+});
+
+export function useNotifications() {
+  const [expoPushToken, setExpoPushToken] = useState<string | null>(null);
+  const [notification, setNotification] =
+    useState<Notifications.Notification | null>(null);
+  const notificationListener = useRef<Notifications.Subscription>();
+  const responseListener = useRef<Notifications.Subscription>();
+
+  useEffect(() => {
+    registerForPushNotificationsAsync().then((token) => {
+      if (token) setExpoPushToken(token);
+    });
+
+    notificationListener.current =
+      Notifications.addNotificationReceivedListener((notification) => {
+        setNotification(notification);
+      });
+
+    responseListener.current =
+      Notifications.addNotificationResponseReceivedListener((response) => {
+        // Manejar cuando el usuario toca la notificacion
+        console.log(response);
+      });
+
+    return () => {
+      if (notificationListener.current) {
+        Notifications.removeNotificationSubscription(
+          notificationListener.current
+        );
+      }
+      if (responseListener.current) {
+        Notifications.removeNotificationSubscription(responseListener.current);
+      }
+    };
+  }, []);
+
+  return { expoPushToken, notification };
+}
+
+async function registerForPushNotificationsAsync() {
+  let token;
+
+  if (Platform.OS === "android") {
+    await Notifications.setNotificationChannelAsync("default", {
+      name: "default",
+      importance: Notifications.AndroidImportance.MAX,
+      vibrationPattern: [0, 250, 250, 250],
+      lightColor: "#FF231F7C",
+    });
+  }
+
+  if (Device.isDevice) {
+    const { status: existingStatus } =
+      await Notifications.getPermissionsAsync();
+    let finalStatus = existingStatus;
+
+    if (existingStatus !== "granted") {
+      const { status } = await Notifications.requestPermissionsAsync();
+      finalStatus = status;
+    }
+
+    if (finalStatus !== "granted") {
+      console.log("Failed to get push token");
+      return;
+    }
+
+    const projectId = Constants.expoConfig?.extra?.eas?.projectId;
+    token = (await Notifications.getExpoPushTokenAsync({ projectId })).data;
+  }
+
+  return token;
+}
+
+// Funcion para enviar notificacion local
+export async function sendLocalNotification(
+  title: string,
+  body: string,
+  data?: Record<string, unknown>
+) {
+  await Notifications.scheduleNotificationAsync({
+    content: {
+      title,
+      body,
+      data,
+    },
+    trigger: null, // Inmediato
+  });
+}
+```
+
+### Paso 8: Configurar deep linking
+
+Actualizar `app.json`:
+
+```json
+{
+  "expo": {
+    "name": "my-mobile-app",
+    "slug": "my-mobile-app",
+    "scheme": "myapp",
+    "ios": {
+      "bundleIdentifier": "com.yourcompany.myapp",
+      "associatedDomains": ["applinks:yourapp.com"]
+    },
+    "android": {
+      "package": "com.yourcompany.myapp",
+      "intentFilters": [
+        {
+          "action": "VIEW",
+          "autoVerify": true,
+          "data": [
+            {
+              "scheme": "https",
+              "host": "yourapp.com",
+              "pathPrefix": "/"
+            }
+          ],
+          "category": ["BROWSABLE", "DEFAULT"]
+        }
+      ]
+    }
+  }
+}
+```
+
+Crear `app/[id].tsx` para rutas dinamicas:
+
+```typescript
+import { View, Text } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+
+export default function DetailScreen() {
+  const { id } = useLocalSearchParams();
+
+  return (
+    <View className="flex-1 items-center justify-center bg-white dark:bg-gray-900">
+      <Text className="text-xl dark:text-white">Detalle: {id}</Text>
+    </View>
+  );
+}
+```
+
+### Paso 9: Crear servicio de API
+
+Crear `services/api.ts`:
+
+```typescript
+const API_URL = "https://api.example.com";
+
+class ApiService {
+  private token: string | null = null;
+
+  setToken(token: string | null) {
+    this.token = token;
+  }
+
+  private async request<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<T> {
+    const headers: HeadersInit = {
+      "Content-Type": "application/json",
+      ...options.headers,
+    };
+
+    if (this.token) {
+      headers["Authorization"] = `Bearer ${this.token}`;
+    }
+
+    const response = await fetch(`${API_URL}${endpoint}`, {
+      ...options,
+      headers,
+    });
+
+    if (!response.ok) {
+      throw new Error(`API Error: ${response.status}`);
+    }
+
+    return response.json();
+  }
+
+  // Metodos de la API
+  async getItems() {
+    return this.request<Item[]>("/items");
+  }
+
+  async getItem(id: string) {
+    return this.request<Item>(`/items/${id}`);
+  }
+
+  async createItem(data: CreateItemInput) {
+    return this.request<Item>("/items", {
+      method: "POST",
+      body: JSON.stringify(data),
+    });
+  }
+}
+
+export const api = new ApiService();
+
+// Types
+interface Item {
+  id: string;
+  title: string;
+  description: string;
+}
+
+interface CreateItemInput {
+  title: string;
+  description: string;
+}
+```
+
+### Paso 10: Tab Home con lista
+
+Actualizar `app/(tabs)/index.tsx`:
+
+```typescript
+import { View, Text, FlatList, RefreshControl } from "react-native";
+import { useState, useCallback } from "react";
+import { Button } from "@/components/ui/Button";
+import { router } from "expo-router";
+
+interface Item {
+  id: string;
+  title: string;
+  description: string;
+}
+
+export default function HomeScreen() {
+  const [items, setItems] = useState<Item[]>([
+    { id: "1", title: "Primer item", description: "Descripcion del item" },
+    { id: "2", title: "Segundo item", description: "Otra descripcion" },
+  ]);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    // Simular fetch
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    setRefreshing(false);
+  }, []);
+
+  const renderItem = ({ item }: { item: Item }) => (
+    <View
+      className="bg-white dark:bg-gray-800 p-4 rounded-xl mb-3 shadow-sm"
+      onTouchEnd={() => router.push(`/${item.id}`)}
+    >
+      <Text className="text-lg font-semibold dark:text-white">
+        {item.title}
+      </Text>
+      <Text className="text-gray-600 dark:text-gray-400 mt-1">
+        {item.description}
+      </Text>
+    </View>
+  );
+
+  return (
+    <View className="flex-1 bg-gray-50 dark:bg-gray-900">
+      <FlatList
+        data={items}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        contentContainerClassName="p-4"
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        ListEmptyComponent={
+          <View className="items-center py-8">
+            <Text className="text-gray-500">No hay items</Text>
+          </View>
+        }
+      />
+
+      <View className="p-4">
+        <Button
+          title="Agregar Item"
+          onPress={() => console.log("Add item")}
+        />
+      </View>
+    </View>
+  );
+}
+```
+</setup_steps>
+
+<verification>
+## Verificacion
+
+### 1. Iniciar app
+```bash
+npx expo start
+```
+
+### 2. Probar en Expo Go
+- Escanear QR con Expo Go
+- Navegar entre tabs
+- Probar dark mode
+
+### 3. Verificar NativeWind
+- Los estilos de Tailwind deben aplicar
+- Dark mode debe funcionar
+
+### 4. Probar deep link
+```bash
+# iOS Simulator
+npx uri-scheme open myapp://1 --ios
+
+# Android Emulator
+npx uri-scheme open myapp://1 --android
+```
+
+### 5. Build de desarrollo
+```bash
+npx expo run:ios
+# o
+npx expo run:android
+```
+</verification>
+
+<common_issues>
+## Problemas Comunes
+
+### "NativeWind styles not applying"
+- Verificar babel.config.js
+- Reiniciar metro bundler: `npx expo start -c`
+
+### "Push notifications not working in Expo Go"
+- Las push notifications requieren build nativo
+- Usar `expo-dev-client` para testing completo
+
+### "Deep links not working"
+- Verificar scheme en app.json
+- Reinstalar la app despues de cambiar config
+</common_issues>
+
+<builds>
+## Builds para Stores
+
+### Configurar EAS Build
+```bash
+npm install -g eas-cli
+eas login
+eas build:configure
+```
+
+### Build iOS
+```bash
+eas build --platform ios
+```
+
+### Build Android
+```bash
+eas build --platform android
+```
+
+### Submit a stores
+```bash
+eas submit --platform ios
+eas submit --platform android
+```
+</builds>