Arquitectura Modular con React Native

La arquitectura modular es una forma de organizar el código que divide una aplicación en módulos independientes o “features”, cada uno con su propia lógica, pantallas, estado y componentes.

El objetivo de este proyecto es que aprendas a estructurar una app React Native CLI con TypeScript siguiendo este enfoque, para que sea más escalable, mantenible y fácil de entender.

1cd react-native-movie-catalogue
2npm install  

1cd ios && pod install && cd ..

1npm run android
2npm run ios  

📝 Instrucciones

El objetivo es modularizar la app de catálogo de películas, migrando las secciones Movies y Categories.

1. Crea la estructura de features y shared:

   1src/
   2  features/
   3    movies/{screens,components,store}
   4    categories/{screens,store}
   5  shared/{ui,lib,types}
   6  navigation/{StackNavigator.tsx, feature-registry.ts}

2. Mueve las pantallas a su feature correspondiente:
   • HomeScreen → features/movies/screens/MoviesListScreen.tsx
   • MovieDetailScreen → features/movies/screens/MovieDetailScreen.tsx
   • CategoriesScreen → features/categories/screens/CategoriesScreen.tsx
   • CategoryMoviesScreen → features/categories/screens/CategoryMoviesScreen.tsx
3. Coloca los datos y UI genéricos en @shared:
   • shared/lib/movies.ts con un arreglo movies y helper getMoviesByCategory.
   • shared/ui/Grid.tsx para espaciar contenido.
   • shared/types/index.ts con el tipo Movie.
4. Crea un store por feature (Zustand):
   • features/movies/store/movies.store.ts con favorites, toggle, isFav.
   • features/categories/store/categories.store.ts con active, setActive.
5. Crea un archivo index.ts en cada feature como punto de entrada (features/<x>/index.ts) y define rutas: moviesRoutes y categoriesRoutes.

Este archivo actuará como puerta de entrada del módulo, re-exportando las pantallas, stores o componentes que deban ser accesibles desde fuera y agrupando las rutas del feature. Todo lo demás dentro de la carpeta se considera parte interna del módulo.

1. Registra las rutas en navigation/feature-registry.ts y móntalas en StackNavigator.tsx.
2. Configura alias de imports en tsconfig.json y babel.config.js para @/*, @features/*, @shared/*.
3. Evita imports cruzados entre features: sólo se puede importar de @shared/*.

Estrategia

1. Estructura primero, lógica después: crea features/ y shared/.
2. Mueve pantallas y datos al lugar correcto.
3. Conecta navegación desde las rutas por feature.
4. Añade stores mínimos por feature.
5. Prueba flujo completo: lista → detalle, categorías → lista filtrada.