scalableReactNativeBoilerplate
1.0.0
Patrocinado por Casainnov
Bem -vindo ao Boilerplate Native Scalable React, um ponto de partida estruturado para a criação de aplicações nativas do React que são sustentáveis, escaláveis e eficientes. Este caldeira segue as melhores práticas para organizar sua base de código, configurar gerenciamento de estado, lidar com interações da API, temas e muito mais. Usamos a versão nativa mais recente do React e mantemos todas as bibliotecas atualizadas, garantindo a compatibilidade com os recursos e melhorias mais recentes.
├── 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
Esse aplicativo nativo reagir, construído na versão 0.75.3, mostra uma arquitetura robusta projetada para experiências de usuário sem costura.
Aproveitando a navegação React (V6), o aplicativo fornece navegação intuitiva em várias telas, garantindo que os usuários possam acessar facilmente os recursos.
Com o Redux Toolkit (V2) para gerenciamento de estado, ele lida com eficientemente estados de aplicativos complexos, permitindo fluxo de dados suave e atualizações em tempo real.
A interface do usuário é aprimorada pelo React Native Paper (V5), que oferece um conjunto abrangente de componentes personalizáveis e opções de temas, criando uma interface visualmente atraente.
Para garantir a qualidade, o aplicativo integra jest e desintoxicação (V20) para teste, permitindo testes automatizados rigorosos e garantia de qualidade.
O Fastlane simplifica o processo CI/CD, facilitando a implantação e eficiente e as atualizações.
As interações da API são gerenciadas usando axios, permitindo uma comunicação flexível e robusta com os serviços de back -end.
A internacionalização é alcançada com o React I18Next e a React Native Localize (permitindo suporte para vários idiomas e ambientes regionais, aumentando a acessibilidade para um público global.
O aplicativo gerencia com eficiência variáveis de ambiente usando a configuração nativa do React, garantindo que dados confidenciais permaneçam seguros e organizados.
Para o manuseio ideal de mídia, o React Native Fast Image aprimora o desempenho de carregamento da imagem, enquanto o React Native SVG fornece suporte gráfico de vetores escaláveis, permitindo um rico conteúdo visual.
As animações são tornadas fluidas e responsivas com o reanimado reanimado reanimado, aprimorando o envolvimento do usuário por meio de transições visualmente atraentes.
Além disso, o React Tamanho Nativo Matters garante o design responsivo em vários tamanhos de dispositivo.
No geral, este aplicativo combina bibliotecas poderosas e uma base de código bem estruturada para criar um aplicativo móvel rico em recursos e fácil de usar
Certifique -se de ter o seguinte instalado:
Clone o repositório:
git clone [email protected]:chohra-med/scalableReactNativeBoilerplate.gitInstale as dependências:
cd scalableReactNativeBoilerplate
yarn Inicie o servidor de desenvolvimento:
yarn startExecute o aplicativo no iOS:
yarn iosExecute o aplicativo no Android:
yarn androidExecute testes de unidade com JEST:
yarn testExecute testes de ponta a ponta com desintoxicação:
yarn detox build -c ios
yarn detox test -c iosO Boilerplate inclui uma configuração Fastlane básica para automatizar construções, testes e implantação.
Construa o aplicativo para Android e iOS:
cd fastlane
fastlane android beta
fastlane ios betaAs contribuições são bem -vindas! Siga estas etapas:
feature/new-feature ).Este projeto está licenciado sob a licença do MIT.
Agradecemos à comunidade por manter bibliotecas incríveis que facilitam o desenvolvimento nativo do React.
Para colaboração, encontre -me no LinkedIn.
Visite Casainnov se precisar de alguma colaboração.
