scalableReactNativeBoilerplate
1.0.0
Parrainé par Casainnov
Bienvenue dans le chauffeur natif de React évolutif, un point de départ structuré pour le bâtiment des applications natives React qui sont maintenables, évolutives et efficaces. Cette passe-partout suit les meilleures pratiques pour organiser votre base de code, la mise en place de la gestion de l'état, la gestion des interactions d'API, du thème, etc. Nous utilisons la dernière version native React et maintenons toutes les bibliothèques à jour, assurant la compatibilité avec les fonctionnalités et améliorations les plus récentes.
├── 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
Cette application native React, construite sur la version 0.75.3, présente une architecture robuste conçue pour les expériences utilisateur transparentes.
Tirant l'extraction de la navigation React (V6), l'application fournit une navigation intuitive sur divers écrans, garantissant que les utilisateurs peuvent facilement accéder aux fonctionnalités.
Avec Redux Toolkit (V2) pour la gestion de l'État, il gère efficacement les états d'application complexes, permettant un flux de données lisse et des mises à jour en temps réel.
L'interface utilisateur est améliorée par React Native Paper (V5), qui propose un ensemble complet de composants personnalisables et d'options de thème, créant une interface visuellement attrayante.
Pour assurer la qualité, l'application intègre la plaisanterie et la désintoxication (V20) pour les tests, permettant des tests automatisés rigoureux et une assurance qualité.
FastLane rationalise le processus CI / CD, facilitant le déploiement et les mises à jour efficaces.
Les interactions API sont gérées à l'aide d'Axios, permettant une communication flexible et robuste avec les services backend.
L'internationalisation est réalisée avec React I18Next et React Native Localize (permettant la prise en charge de plusieurs langues et de paramètres régionaux, améliorant l'accessibilité pour un public mondial.
L'application gère efficacement les variables d'environnement à l'aide de la configuration native React, garantissant que les données sensibles restent sécurisées et organisées.
Pour la manipulation optimale des supports, React Native Fast Image améliore les performances de chargement d'image, tandis que React Native SVG fournit une prise en charge des graphiques vectoriels évolutifs, permettant un riche contenu visuel.
Les animations sont rendues fluide et réactives avec React Native Reanimé améliorant l'engagement des utilisateurs grâce à des transitions visuellement attrayantes.
De plus, React Native Size Matters garantit une conception réactive à travers les différentes tailles de périphérique.
Dans l'ensemble, cette application combine des bibliothèques puissantes et une base de code bien structurée pour créer une application mobile riche en fonctionnalités et conviviale
Assurez-vous que vous avez installé les suivants:
Clone le référentiel:
git clone [email protected]:chohra-med/scalableReactNativeBoilerplate.gitInstallez les dépendances:
cd scalableReactNativeBoilerplate
yarn Démarrer le serveur de développement:
yarn startExécutez l'application sur iOS:
yarn iosExécutez l'application sur Android:
yarn androidExécutez des tests unitaires avec une plaisanterie:
yarn testExécutez des tests de bout en bout avec la désintoxication:
yarn detox build -c ios
yarn detox test -c iosLa plaquette comprend une configuration Fastlane de base pour automatiser les versions, les tests et le déploiement.
Créez l'application pour Android et iOS:
cd fastlane
fastlane android beta
fastlane ios betaLes contributions sont les bienvenues! Veuillez suivre ces étapes:
feature/new-feature ).Ce projet est autorisé sous la licence du MIT.
Merci à la communauté d'avoir maintenu des bibliothèques impressionnantes qui facilitent le développement des indigènes React.
Pour la collaboration, trouvez-moi sur LinkedIn.
Visitez Casainnov si vous avez besoin d'une collaboration.
