React Native Template

Una plantilla completa y lista para usar para iniciar proyectos móviles en React Native CLI. Esta plantilla incluye una estructura organizada con carpeta src/, pantallas de autenticación, navegación configurada, hooks personalizados y componentes reutilizables.

🚀 Características

• ✅ Estructura de proyecto organizada con carpeta src/
• ✅ Sistema de autenticación con AsyncStorage
• ✅ Navegación configurada (Stack + Bottom Tabs)
• ✅ Pantallas de login y home funcionales
• ✅ Contextos para manejo de estado (Auth, Theme, Snackbar)
• ✅ Componentes reutilizables (CustomInput, etc.)
• ✅ Configuración de TypeScript
• ✅ Sistema de iconos con react-native-vector-icons
• ✅ Manejo de notificaciones con Snackbar

📋 Requisitos Previos

Antes de comenzar, asegúrate de tener instalado:

• Node.js (versión 18 o superior)
• npm o yarn
• Java Development Kit (JDK 17)
• Android Studio con SDK de Android
• Xcode (solo para desarrollo en iOS/macOS)
• React Native CLI

npm install -g @react-native-community/cli

Para verificar que todo esté configurado correctamente:

npx react-native doctor

🛠️ Instalación

1. Clonar el repositorio

git clone https://github.com/tu-usuario/react-native-template.git
cd react-native-template

2. Eliminar el historial de Git (opcional)

rm -rf .git
git init

3. Instalar dependencias

npm install
# o
yarn install

4. Renombrar el proyecto

# Instalar react-native-rename globalmente
npm install -g react-native-rename

# Renombrar el proyecto
npx react-native-rename "TuNombreDeApp"

5. Configuración adicional para Android

cd android
./gradlew clean
cd ..

6. Configuración adicional para iOS (solo macOS)

cd ios
pod install
cd ..

🚀 Uso Básico

Ejecutar en Android

# Iniciar Metro Bundler
npm start

# En otra terminal, ejecutar en Android
npm run android
# o
npx react-native run-android

Ejecutar en iOS (solo macOS)

# Iniciar Metro Bundler
npm start

# En otra terminal, ejecutar en iOS
npm run ios
# o
npx react-native run-ios

Limpiar caché (si hay problemas)

npx react-native start --reset-cache

📁 Estructura del Proyecto

src/
├── app/
│   ├── init.tsx                 # Pantalla inicial
│   ├── auth/
│   │   └── login.tsx           # Pantalla de login
│   └── tabs/
│       └── home.tsx            # Pantalla principal (tab)
├── components/                 # Componentes reutilizables
├── context/
│   ├── useAuth.tsx            # Contexto de autenticación
│   ├── themeContext.tsx       # Contexto de tema
│   ├── snackbar.jsx           # Contexto de notificaciones
│   ├── dimensions.ts          # Hook de dimensiones responsive
│   └── useApiRequest.tsx      # Hook para peticiones API
├── navigation/
│   └── MainTabs.tsx           # Configuración de tabs
├── types/
│   ├── async-storage.d.ts     # Tipos para AsyncStorage
│   ├── react-native-vector-icons.d.ts
│   ├── login.ts               # Tipos para login
│   └── images.d.ts            # Tipos para imágenes
├── utils/
│   ├── customInput.tsx        # Componente de input personalizado
│   └── icons.tsx              # Componente de iconos
└── assets/                    # Recursos (imágenes, fuentes, etc.)

Archivos de configuración principales

├── App.tsx                    # Componente principal de la app
├── mainRoutes.tsx             # Configuración de navegación
├── index.js                   # Punto de entrada
├── env.js                     # Variables de entorno
├── package.json               # Dependencias y scripts
├── tsconfig.json              # Configuración de TypeScript
└── metro.config.js            # Configuración de Metro Bundler

⚙️ Personalización

Cambiar el nombre de la aplicación

1. Usando react-native-rename:

npx react-native-rename "NuevoNombreApp"

2. Manualmente:
   • Edita app.json
   • Modifica el displayName en app.json
   • Actualiza el nombre en android/app/src/main/res/values/strings.xml
   • Para iOS: modifica ios/TuApp/Info.plist

Agregar nuevas pantallas

1. Crear el componente de pantalla:

// src/screens/NuevaPantalla.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const NuevaPantalla = () => {
  return (
    <View style={styles.container}>
      <Text>Mi Nueva Pantalla</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default NuevaPantalla;

2. Agregar a la navegación:

// En mainRoutes.tsx
import NuevaPantalla from './src/screens/NuevaPantalla';

// Agregar al Stack Navigator
<Stack.Screen
  name="NuevaPantalla"
  component={NuevaPantalla}
  options={{ headerShown: false }}
/>;

Personalizar el tema

Edita src/context/themeContext.tsx para cambiar colores, tipografías y estilos:

const theme = {
  colors: {
    primary: '#TU_COLOR_PRIMARIO',
    secondary: '#TU_COLOR_SECUNDARIO',
    // ... más colores
  },
  // ... más configuraciones
};

Configurar API

Modifica env.js para configurar tu endpoint de API:

const enviroments = {
  public: 'https://tu-api.com',
};
export default enviroments;

📦 Dependencias Incluidas

• @react-navigation/native - Navegación
• @react-navigation/native-stack - Stack Navigator
• @react-navigation/bottom-tabs - Bottom Tab Navigator
• @react-native-async-storage/async-storage - Almacenamiento local
• react-native-vector-icons - Iconos
• react-native-paper - Componentes UI
• react-native-safe-area-context - Safe Area
• react-native-screens - Optimización de pantallas

🔧 Scripts Disponibles

# Ejecutar en Android
npm run android

# Ejecutar en iOS
npm run ios

# Iniciar Metro Bundler
npm start

# Linter
npm run lint

# Tests
npm test

🐛 Solución de Problemas

Error: "Unable to resolve module"

# Limpiar caché y reinstalar
rm -rf node_modules
npm install
npx react-native start --reset-cache

Problemas con Android

cd android
./gradlew clean
cd ..
npx react-native run-android

Problemas con iOS

cd ios
rm -rf Pods Podfile.lock
pod install
cd ..
npx react-native run-ios

Error de espacio en disco

# Limpiar caché de Gradle
rm -rf ~/.gradle/caches

🤝 Contribución

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

MIT License

Copyright (c) 2025 React Native Template

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

📞 Soporte

Si tienes problemas o preguntas:

1. Revisa la documentación oficial de React Native
2. Consulta los issues del repositorio
3. Crea un nuevo issue si no encuentras solución

⭐ ¡No olvides dar una estrella al proyecto si te fue útil! ⭐