React Native Kickstart 🚀⚛️

This is a React Native project to kick start application development, it is based on expo and typescript, it follows clean and solid principles, industry best practices, as well opinionated configurations, conventions, and libraries

Application Overview 👀

The project is designed with a modular structure, consisting of a core package that can be utilized by every feature, and a features package that is organized based on individual feature types. This approach allows for the reuse of core components across different features, and it facilitates the independent development of additional features.

Core includes the following items:

• API: Client/networking configurations and utilities.
• Components: Common reusable components that can be integrated into various features.
• Configuration: Environment-based configurations for the application (e.g., development, staging, production).
• Store: Utilities for state management, such as unwrapping network responses or handling errors.
• Theme: The application theme, which can be configured and applied to all features.

Features should follow this structure:

• Feature name
  • API: Specific API calls required for the feature's functionality.
  • Components: UI components that handle the feature's UI and behavior, which can leverage core components.
  • Screens: Screen definitions for the feature, typically container components that represent entire screens.
  • Store: State management for the feature's functionality.

Project Configuration 🛠️

This project is built using Expo, a platform for developing, building, and deploying React Native apps. It also utilizes TypeScript for static typing, ESLint for linting, and Prettier for code formatting.

A mock API server is configured for rapid development and testing. The json-server directory contains a sample database that is parsed into an API, which can be utilized during development. Unit testing is set up using Jest, and Husky ensures that committed code is lint-free, formatted, and passes all unit tests.

Environment-specific values can be added to the environment directory, which are then loaded by dotenv and made available to the project via core configurations.

Below is a list of the default scripts that can be run, along with descriptions of their purpose:

• start: Starts the Expo development server.
• start:dev: Starts the Expo development server with the "dev" environment configuration.
• start:prod: Starts the Expo development server with the "prod" environment configuration.
• build:dev: Builds the app for the "dev" environment and exports the assets to a specified URL.
• build:prod: Builds the app for the "prod" environment and exports the assets to a specified URL.
• android: Starts the Expo development server and opens the app in an Android emulator.
• ios: Starts the Expo development server and opens the app in an iOS simulator.
• web: Starts the Expo development server and opens the app in a web browser.
• test: Runs unit tests using Jest.
• lint: Lints the project using ESLint.
• lint:fix: Lints the project using ESLint and automatically fixes any fixable issues.
• format: Formats the project using Prettier.
• prepare: Installs Husky for pre-commit hooks.
• mock-api: Starts the mock API server using json-server and watches the mock/db.json file on port 5000.

Components and Styling 🎨

Reusable components should utilize the core theming package, which is based on light and dark themes. If you follow the Atomic Design methodology and have an interface inventory, this pattern can be extended. All styles should use the StyleSheet API with no inline styles (unless they need to be computed).

API Layer 📡

This project uses Axios for making network calls, with helper methods located in the core package and some reference patterns in the features directory.

State Management 💾

Zustand is used for global state management, as it is simple and lightweight compared to other frameworks. The Context API and state hooks can also be used. For global shared state, prefer Zustand stores or the Context API. For component-specific state, use state hooks.

Error Handling 🚫

Basic error handling is set up with Zustand stores wrapping API error results and setting an error response in the store. This is one approach to handling and mapping API errors. Unexpected errors should be managed using error boundaries.

Testing 🧪

The project employs unit testing with Jest and react-native-testing-library. Test files are co-located with source files. Code coverage is generated and should be maintained at a high level.

Localization 🌍

Localization is achieved using i18n-js and Expo Localization. Translations should be created for each feature and locale that the application supports.

Application Dependencies 🔌

Dependencies

• axios: - A popular HTTP client for making API requests.
• expo: - A framework and platform for building universal React applications.
• expo-constants: - Provides system information that remains constant throughout the app's life.
• expo-localization: - Provides access to localization and internationalization features.
• expo-status-bar: - A component for handling the status bar on mobile devices.
• i18n-js: - A library for managing translations and localization.
• jest: - A JavaScript testing framework.
• jest-expo: - Jest preset and utilities for testing Expo projects.
• lodash: - A utility library that provides helpful functions for working with arrays, objects, and more.
• react: - A JavaScript library for building user interfaces.
• react-native: - A framework for building native apps using React.
• react-native-gesture-handler: - Provides a more native touch system for gesture handling in React Native applications.
• zustand: - A lightweight and straightforward state management library for React applications.
• react-native-web: - A library that brings React Native components and APIs to the web, allowing you to build web apps with React Native components and styles.
• react-dom: - The entry point for the React DOM library, which provides DOM-specific methods to render and manipulate React components in the browser.
• @expo/webpack-config: - The default Webpack configuration for Expo web projects, which handles bundling and optimization of JavaScript and other assets for web applications built using Expo.

Dev Dependencies

• @babel/core: - A JavaScript compiler that transforms your ES6/ESNext code into ES5 for better browser compatibility.
• @testing-library/jest-native: - Custom Jest matchers for testing React Native applications.
• @testing-library/react-native: - A lightweight testing library for React Native applications.
• @types/jest: - TypeScript definitions for Jest.
• @types/lodash: - TypeScript definitions for Lodash.
• @types/react: - TypeScript definitions for React.
• @types/react-test-renderer:
  • TypeScript definitions for react-test-renderer.
• @typescript-eslint/eslint-plugin:
  • An ESLint plugin that provides lint rules specifically for TypeScript code.
• @typescript-eslint/parser: - A parser that allows ESLint to lint TypeScript code.
• axios-mock-adapter: - A library for mocking axios requests for testing.
• dotenv: - Loads environment variables from a .env file.
• eslint: - A popular JavaScript linter for identifying and reporting on patterns in code.
• eslint-config-prettier: - A config that disables ESLint rules that conflict with Prettier.
• eslint-plugin-prettier: - An ESLint plugin that runs Prettier as an ESLint rule.
• eslint-plugin-react: - React specific linting rules for ESLint.
• eslint-plugin-react-native: - React Native specific linting rules for ESLint.
• husky: - A Git hooks manager that simplifies running tasks before committing or pushing code.
• json-server: - A simple command line tool for serving a REST API from a JSON file.
• prettier: - An opinionated code formatter for JavaScript, TypeScript, and more.
• typescript: - A typed superset of JavaScript that adds static types and compiles to plain JavaScript.