scalableReactNativeBoilerplate
1.0.0
Patrocinado por Casainnov
Bienvenido a la Boilerplate nativa React escalable, un punto de partida estructurado para construir aplicaciones nativas React que sean mantenibles, escalables y eficientes. Esta calderera sigue las mejores prácticas para organizar su base de código, configurar la gestión del estado, manejar interacciones API, temas y más. Utilizamos la última versión de React Native y mantenemos todas las bibliotecas actualizadas, asegurando la compatibilidad con las características y mejoras más recientes.
├── e2e # Detox configuration for different environments
├── Fastlane # CI/CD configuration using Fastlane for automated builds and deployment
├── src
├── assets # Directory for app assets such as images and fonts
│ ├── images # Folder for image assets used in the app
│ ├── package.json # Package file for managing assets if needed
│ └── icons # Folder for SVG or other icon assets
│ ├── iconTransactions.svg # Icon for transactions
│ ├── iconBlocks.svg # Icon for blocks
│ ├── iconSettings.svg # Icon for settings
│ ├── iconEyeInactive.svg # Inactive eye icon
│ └── iconEyeActive.svg # Active eye icon
│ └── fonts # Folder for font files
│ ├── Roboto-Regular.ttf # Regular weight of Roboto font
│ └── Roboto-Bold.ttf # Bold weight of Roboto font
├── api # Folder for handling API interactions
│ ├── constant.ts # Constants used throughout API calls
│ ├── Api.ts # Main API configuration and methods
│ ├── types.ts # TypeScript types related to API responses
│ ├── package.json # Package file for API utilities if needed
│ └── customAPI # Custom API services for specific endpoints
│ ├── routes.ts # Routes for custom API calls
│ └── customApi.ts # Custom API implementation
├── components # Reusable UI components organized by Atomic Design
│ ├── package.json # Package file for component library
│ ├── atoms # Atoms: basic UI components (buttons, inputs, etc.)
│ │ ├── LoadingComponent # Loading spinner or component
│ │ │ └── index.tsx # Component implementation
│ │ ├── Button # Button component
│ │ │ └── index.tsx # Component implementation
│ │ │ └── tests__ # Unit tests for Button component
│ │ │ └── LoadingScreen.test.tsx
│ │ ├── Text # Text component for consistent styling
│ │ │ └── index.tsx # Component implementation
│ │ └── StyledImage # Styled image component
│ │ └── index.tsx # Component implementation
│ ├── molecules # Molecules: combinations of atoms (card, form elements, etc.)
│ └── organisms # Organisms: complex components made from molecules and atoms
├── container # Context and provider components for global states
│ ├── LanguageHelper.tsx # Language context provider
│ ├── AppThemeProvider.tsx # Theme context provider
│ └── package.json # Package file for container components
├── hooks # Custom hooks for reusable logic
│ ├── useAppDispatch.ts # Hook for dispatching actions in Redux
│ ├── useAppSelector.ts # Hook for selecting state from Redux store
│ ├── useActions.ts # Hook for using Redux actions
│ ├── package.json # Package file for hooks
│ ├── index.ts # Entry point for hooks
│ └── useTraceUpdate.ts # Hook for tracing component updates
├── navigation # Navigation setup for the app
│ ├── index.tsx # Main navigation entry point
│ ├── AppNavigation # Navigation component
│ │ ├── index.tsx # Component implementation
│ │ └── AppScreens.tsx # Screens defined for navigation
│ ├── package.json # Package file for navigation
│ ├── LinkingConfiguration.ts # Configuration for deep linking
│ └── types.tsx # TypeScript types related to navigation
├── redux # Redux store and configuration
│ ├── appConfig # App configuration for Redux
│ │ ├── appConfigSelectors.ts # Selectors for app config
│ │ ├── appConfigModel.ts # Model for app config state
│ │ └── appConfig.ts # Main app configuration
│ ├── package.json # Package file for Redux
│ ├── rootReducer.ts # Root reducer for combining all reducers
│ └── store.ts # Redux store configuration
├── screens # Screens or views of the app organized by features
│ ├── package.json # Package file for screens
│ ├── HomeScreen # Home screen component
│ │ └── index.tsx # Component implementation
│ └── SettingScreen # Settings screen component
│ └── index.tsx # Component implementation
├── theme # Theming configuration and styling
│ ├── Colors.ts # Color definitions used throughout the app
│ ├── Fonts.ts # Font definitions and styling
│ ├── Screens.ts # Screen-specific styles
│ ├── globalStyling # Global styling definitions
│ │ ├── cards.ts # Card component styles
│ ├── package.json # Package file for theming
│ └── index.ts # Entry point for theme
├── i18n # Internationalization configuration
│ ├── allLanguages.ts # List of all available languages
│ ├── en_GB.ts # English (UK) translations
│ ├── fr_FR.ts # French translations
│ ├── ar_SA # Arabic (Saudi Arabia) translations
│ │ └── common.json # Common phrases in Arabic
│ ├── index.ts # Main entry for i18n configuration
│ ├── newLineProcessor.ts # Helper for processing new lines in translations
│ ├── en_GB # English (UK) translations (nested)
│ │ └── common.json # Common phrases in English (UK)
│ └── fr_FR # French translations (nested)
│ └── common.json # Common phrases in French
└── types # TypeScript type definitions for global use
│ ├── i18next.d.ts # Type definitions for i18next
│ └── declarations.d.ts # Global declarations
└── __tests__ # Unit and integration tests for components and screens
Esta aplicación nativa react, construida en la versión 0.75.3, muestra una arquitectura robusta diseñada para experiencias de usuario perfectas.
Aprovechando la navegación React (V6), la aplicación proporciona navegación intuitiva en varias pantallas, asegurando que los usuarios puedan acceder fácilmente a las funciones.
Con Redux Toolkit (V2) para la gestión del estado, maneja eficientemente estados de aplicación complejos, lo que permite un flujo de datos suave y actualizaciones en tiempo real.
La interfaz de usuario se ve reforzada por React Native Paper (V5), que ofrece un conjunto integral de componentes y opciones de temas personalizables, creando una interfaz visualmente atractiva.
Para garantizar la calidad, la aplicación integra broma y desintoxicación (V20) para las pruebas, lo que permite las rigurosas pruebas automatizadas y la garantía de calidad.
FastLane optimiza el proceso CI/CD, facilitando la implementación y actualizaciones eficientes.
Las interacciones API se gestionan utilizando AXIOS, lo que permite una comunicación flexible y robusta con los servicios de backend.
La internacionalización se logra con React I18Next y React Native Localize (, lo que permite el apoyo para múltiples idiomas y entornos regionales, mejorando la accesibilidad para una audiencia global.
La aplicación administra eficientemente las variables de entorno utilizando la configuración nativa React, asegurando que los datos confidenciales sigan siendo seguros y organizados.
Para el manejo óptimo de los medios, React Native Fast Image mejora el rendimiento de carga de imágenes, mientras que React Native SVG proporciona soporte de gráficos vectoriales escalables, lo que permite un contenido visual rico.
Las animaciones se hacen fluidas y receptivas con React Native Reanimated Mejorando la participación del usuario a través de transiciones visualmente atractivas.
Además, React Native Size Matters garantiza un diseño receptivo en varios tamaños de dispositivos.
En general, esta aplicación combina bibliotecas potentes y una base de código bien estructurada para crear una aplicación móvil rica en funciones y fácil de usar
Asegúrese de tener lo siguiente instalado:
Clon el repositorio:
git clone [email protected]:chohra-med/scalableReactNativeBoilerplate.gitInstale las dependencias:
cd scalableReactNativeBoilerplate
yarn Inicie el servidor de desarrollo:
yarn startEjecute la aplicación en iOS:
yarn iosEjecute la aplicación en Android:
yarn androidEjecutar pruebas unitarias con broma:
yarn testEjecute pruebas de extremo a extremo con desintoxicación:
yarn detox build -c ios
yarn detox test -c iosEl Boilerplate incluye una configuración básica de Fastlane para automatizar compilaciones, pruebas e implementación.
Cree la aplicación para Android e iOS:
cd fastlane
fastlane android beta
fastlane ios beta¡Las contribuciones son bienvenidas! Siga estos pasos:
feature/new-feature ).Este proyecto tiene licencia bajo la licencia MIT.
Gracias a la comunidad por mantener bibliotecas increíbles que hacen que React Native Development sea más fácil.
Para la colaboración, encuéntrame en LinkedIn.
Visite Casainnov si necesita alguna colaboración.
