react-native-boilerplate: A TypeScript repository from wataru-maeda

Demo

Say goodbye to time-consuming setup tasks like restructuring files, installing libraries, and crafting reusable components. Our project boilerplate is your solution to eliminate redundant work when starting from scratch. It includes only the most commonly-used libraries, so you can hit the ground running with a fully configured setup.

🗒️ Requirements

🚀 Quick Start

Download zip or click "Use this template"
Install packages with npm install or yarn install
Spin up dev environment with npm run start or yarn run start

🤖 What's included

Navigation

Utilizes react-navigation v6 for stack, tab, and drawer navigation configurations as the default setup. Flexibility in modifying navigation styles. For adjustments to the navigation style, refer to the implementation details in Stack.tsx, Drawer.tsx, and Tab.tsx.

Simplified navigation structure customization:

To omit a navigation type, such as drawer navigation, simply remove the corresponding drawer file. Alterations to the navigation type can be effortlessly made by substituting the navigation configuration in Navigator.tsx with your preferred choice between tab or stack navigation.

Dynamic navigation switching based on user status:

Integration of login and signup functionality is crucial for apps requiring user authentication. The navigation scheme should adapt according to the user's authentication status.
The navigator allows for the configuration of distinct navigation paths contingent on whether the user is logged in or not.

Redux

Redux Hooks are pre-configured for immediate use.

Learn how to set up Redux Hooks by reviewing app.slice.ts.
Discover the application of Redux Hooks in Navigator.tsx.

Access all Redux modules within the modules folder.The boilerplate includes Redux Hooks integration for straightforward state management. For an illustration of module utilization, refer to app.slice.ts.

To create a new module, replicate app.slice.ts, rename it appropriately within the modules directory, and subsequently incorporate the module into the store. The process is designed to be straightforward and efficient.

Assets

This project centralizes the management of assets, including images, icons, and fonts, within the theme directory. For seamless integration of new assets, ensure their importation into the designated files where they will be utilized. This approach facilitates streamlined access to all assets via the theme structure. To further optimize performance, asset preloading has been incorporated into the boilerplate. This setup also supports the use of SVG files, offering extensive flexibility in managing visual resources. Assets are made effortlessly accessible for implementation across the project by importing them directly from the theme.

Absolute Paths

Navigating through complex project architectures with deeply nested folders often complicates the use of relative paths, potentially leading to errors. To alleviate this issue, our boilerplate simplifies the development process by facilitating the use of absolute paths. This means you can replace convoluted relative paths like ../../../components/Button with straightforward references such as components/Button in your import statements. The implementation for this feature is configured within both the babel.config.js and tsconfig.json files. These configurations ensure a hassle-free experience in utilizing absolute paths across your project, enhancing clarity and reducing the likelihood of path-related errors.

Environment Variables

Environment variables can be defined within the respective files for different deployment stages: .env.development for development, .env.production for production, and .env.test for test.

To spinup the project in a development environment, execute npm run start:dev. Conversely, for launching the project in a production, use npm run start.
It is imperative to avoid storing sensitive information, such as private keys, within variables prefixed by EXPO_PUBLIC_. For comprehensive guidelines on securely managing sensitive data, refer to the recommendations provided in storing sensitive info.

[CI] Code formatting, linting and testing on pre-commit

Configurations for Eslint, Prettier, and Jest have been meticulously established to ensure your code remains clean and adheres to best practices. Here's a breakdown of how these tools enhance your development workflow:

Throughout the coding process, these integrated tools proactively scan and refine your code. Activating the 'Format on Save' feature further streamlines this process, automatically tidying your code with each save.
Committing changes triggers a pre-commit script that meticulously checks, formats, and tests your code. This comprehensive review process ensures your contributions are both error-free and stylistically consistent.
Successfully navigating through the stages of code verification, formatting, and testing empowers you to commit your changes with absolute confidence. You can rest assured knowing your code is not only efficient but also meets the highest standards of quality and reliability.

[CD] Release previews on Pull-Request

When you've completed your work and need to share a preview with the QA team, our boilerplate automates the distribution process for you. Here's how it works:

Whenever you create a pull request (PR) or merge, it automatically generates a preview channel in your Expo account.
You don't need to run 'eas' commands every time you create a PR; the process is streamlined for you.
The continuous delivery (CD) process is managed through the preview.yml configuration file, which utilizes expo-github-action.

To set up the CD workflow, follow these steps:

Create an EXPO_TOKEN in your Expo account. You can do this by visiting this link.
In your GitHub repository, go to Settings, then navigate to Secrets and variables -> Actions -> Add new repository secret. Make sure to name the secret as EXPO_TOKEN.
Update name, slug, owner, projectId and url in app.json:
Update in name, slug, projectId, ios, android in app.config.ts
After you push changes to the main branch, a new preview will be created automatically.

🧑‍💻 Need native code?

To generate iOS and Android native code, you can run npx expo prebuild in the project's root directory. For more details and specific instructions, please refer to the Expo documentation page.

🥇 Libraries

🥈 Libraries for development

☀️ Icons

Expo provides a popular set of vector icons. Please search icons from here

📓 Licence

This project is available under the MIT license. See the LICENSE file for more info.

wataru-maeda/react-native-boilerplate