This repository is an optimized React Native library boilerplate, designed to boost your library development process.🧑💻🔧 It's tailored for both bare React Native applications and Expo-created ones. This boilerplate is equipped with valuable tools, simplifying library development and ensuring high-quality code.
- Enforces code style with eslint, prettier, and TypeScript,
- Precommit hooks checking code style and type issues,
- GitHub Actions to aid in your development process,
- Automated library deployments to npm and hassle-free versioning thanks to semantic-release,
- Provides an example app for both bare React Native projects and Expo-managed ones,
-
jest
setup is also available with example tests
Node 18 or greater is required. Development for iOS needs a Mac and Xcode.
To create a fresh project, just run:
npx rn-lib-temp init <projectName>
Before starting development, go to the directory where you created the template project and install all necessary dependencies with yarn
:
yarn
For iOS only: Install required Pods for the bare React Native example app:
yarn example:bare pod
For more details about the npx rn-lib-temp
command use the following command:
npx rn-lib-temp help
To use the GitHub Actions bundled with this boilerplate, you'll need to provide 2 secrets (refer to this page for more about secrets):
-
GH_TOKEN
- a GitHub token withrepo
permissions (check docs for more on GitHub access tokens). -
NPM_TOKEN
- an npm token employed by semantic-release for automatic library deployment (see docs for info on npm access tokens).
Alternatively, remove workflows from the .github
directory if you prefer not to use GitHub Actions.
The project can be categorized into 2 subprojects:
- Library Source Code
- Example App
The root directory of the project houses several configuration files for tools like prettier, eslint, and TypeScript. It also contains the config of the semantic-release library and the react-native-builder-bob config for convenient npm deployments and proper versioning.
By default, the resulting library will include files specified under the files
key in the package.json
:
-
src
directory - where you write all library source code, -
dist
directory - generated by react-native-builder-bob during the build process, -
LICENSE
- you should include yourLICENSE
file because it's not provided by default, -
CHANGELOG.md
- a file containing all version history with included changes, automatically generated by the semantic-release library
If you want to add dependency that will be used by your library, you should add it in the project root. I decided to use the yarn
package manager as it is one of the most commonly used package managers which has good support for monorepos with workspaces (the example app). All dependencies should be installed with yarn
.
This template also includes an example app that is handy for testing features implemented in the library and showcasing them to your users. The example app is not part of the library source files deployed to npm.
The example app resides in the example
directory. Inside, you'll find three subdirectories:
-
app
- Where the example app source code is located. -
bare
- A bare example of a React Native app. -
expo
- An example of a React Native Expo app.
If you don't need to support Expo or a bare React Native apps, you can just remove the corresponding directory.
Install all example app dependencies in the example/app
directory. Similarly to the library, use yarn
package manager to handle your example app dependencies.
For launching the bare React Native example app:
yarn example:bare start|android|ios|pod
For the Expo React Native app:
yarn example:expo start|android|ios
-
start
- starts metro client -
android
- starts example app on the Android emulator/device, -
ios
- starts example app on the iOS simulator/device, -
pod
- installs Pods required by example app native iOS dependencies.
The release.yaml
workflow included in the project contains the auto deployment logic. By default, the deployment will be caused on the workflow dispatch action (manually from the GitHub Actions page). You can change this behavior by modifying the workflow triggers.