Overview:
The “react-native-template” is a starter kit for initializing a new React-Native project. It comes preconfigured with commonly used libraries and a well-organized folder structure. The template provides several key features such as pre-configured folder structure, basic authentication screens, reusable components and utility functions, logging, navigation, state management, Git hooks, environment configurations, testing support, local data storage, splash screen, API requests, localization, and responsive UI. The installation process is simple and involves setting up the environment properly and generating a new React Native app using the template.
Features:
- Pre-configured folder structure: The template provides a ready-to-use folder structure for organizing the project files.
- Basic Authentication screens: Includes login, signup, and forgot password screens with flow.
- Reusable common components, utility functions, and constants: Provides a collection of common components, utility functions, and constants that can be used across the project.
- Logger: Allows for easy logging of data with colored logs in the Chrome Debugger.
- Navigation using react-navigation (v6): Implements navigation using the popular react-navigation library.
- State management using redux: Uses redux for state management.
- Redux middleware redux-saga: Provides support for redux-saga middleware for handling asynchronous actions.
- Git hooks using husky: Integrated with husky for running Git hooks during development.
- Staging and Production environment configurations using react-native-config: Allows for easy configuration of environment variables for different environments.
- TDD (Test-Driven Development) using jest: Supports writing tests using jest for test-driven development.
- (Unsecured) local data storage using AsyncStorage: Provides local data storage using the AsyncStorage library.
- Splash screen using react-native-bootsplash: Includes a splash screen for the app.
- API requests using axios: Supports making API requests using the axios library.
- Localization using react-native-localization: Includes support for localization using react-native-localization.
- Responsive UI using flexbox and react-native-size-matters: Allows for creating responsive UI using flexbox and the react-native-size-matters library.
Installation:
Before installing the template, ensure that you have followed the environment setup instructions from the official React Native documentation. The installation command may fail if you have the global legacy react-native-cli installed on your machine, so make sure to uninstall it before proceeding.
To quickly start using the template, generate a new React Native app using the following command:
npx react-native init MyApp --template @ajaysidhu/react-native-template
You may be prompted to confirm the installation for the packages react-native and husky. Simply hit enter to proceed.
The template will automatically install the necessary npm dependencies and pods (if you are using macOS).
For further details and documentation, refer to the documentation website.
Summary:
The react-native-template is a comprehensive starter kit for React Native projects. It provides a preconfigured setup with commonly used libraries and a well-organized folder structure. With features like authentication screens, reusable components, navigation, state management, and more, the template offers a solid foundation for building mobile apps. The installation process is straightforward, and extended setup options are available for configuring different environments. The roadmap for the template includes adding additional features like secured user data storage, dark mode, atomic structure for components, common styles, and versioning of website documentation.