react-native-mobile

Files (1)

• SKILL.md

SKILL.md (first lines)

# React Native Mobile Skill

## Cuándo usar esta skill
- Crear una app móvil iOS/Android con React Native
- Trabajar con Expo (managed o bare workflow)
- Implementar navegación, gestos, animaciones nativas
- Acceder a cámara, GPS, notificaciones push, biometría
- Preparar una app para App Store / Google Play

## Arquitectura recomendada

```
src/
├── app/              # Expo Router (basado en archivos, como Next.js)
│   ├── (tabs)/       # Tab navigation
│   │   ├── index.tsx
│   │   └── profile.tsx
│   ├── _layout.tsx   # Root layout
│   └── modal.tsx
├── components/       # Componentes reutilizables
│   ├── ui/           # Componentes de UI primitivos
│   └── features/     # Componentes de feature
├── hooks/            # Custom hooks
├── services/         # API calls, auth, storage
├── store/            # Estado global (Zustand/Jotai)
├── utils/            # Utilidades
└── constants/        # Colores, sizes, etc.
```

## Setup inicial con Expo

```bash
# Crear proyecto con Expo Router (recomendado)
npx create-expo-app@latest mi-app --template

# Instalar dependencias esenciales
npx expo install expo-router expo-constants
npx expo install @react-navigation/native @react-navigation/bottom-tabs
npx expo install react-native-safe-area-context react-native-screens

# Iniciar en desarrollo
npx expo start

# Ejecutar en iOS/Android (con simulador)
npx expo run:ios
npx expo run:android
```

## Navegación con Expo Router

```tsx
// app/_layout.tsx — Root Layout
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
    </Stack>
  );
}

// app/(tabs)/_layout.tsx — Tab Navigation
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: '#2B5CE6' }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Inicio',
          tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Perfil',
          tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
        }}
      />
    </Tabs>
  );
}

// Navegar programáticamente
import { router } from 'expo-router';
router.push('/detail/123');
router.replace('/login');
router.back();
```

## Componentes y estilos

```tsx
import { View, Text, StyleSheet, Pressable, ScrollView, FlatList } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

// ✅ Componente responsivo con safe area
function HomeScreen() {
  const insets = useSafeAreaInsets();
  
  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={[
        styles.content,
        { paddingBottom: insets.bottom + 20 }
      ]}
    >
      <Text style={styles.title}>Bienvenido</Text>
      
      {/* FlatList para listas largas (mejor performance que map) */}
      <FlatList
        data={items}
        keyExtractor={(item) => item.id}

From garri333/Skills, MIT.

More from garri333/Skills