rn-lib-temp
A usable template for setting up a new React Native library. It's designed to reduce the hassle of configuration and help quickly start the project.
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 (example/fabric
or example/paper
):
yarn pod
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.
he repository uses the most common monorepo structure where the example
directory contains the example app and the packages
directory contains sources of the library itself, as well as, documentation and other packages (if necessary).
By default, the resulting library will include files specified under the files
key in the packages/<your-library-name>/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, -
README.md
- readme file from the repository root directory
- Usually for smaller dependencies or these which must point to the exact version,
- Should be listed under
dependencies
field in thepackages/<your-library-name>/package.json
- Usually large dependencies or these, which are commonly used by other packages (such as
react-native-reanimated
), - Should be listed under
peerDependencies
field in thepackages/<your-library-name>/package.json
, - Should be installed as
dependencies
of the example app (added to theexample/app/package.json
)
All dependencies should be installed with yarn
in order to ensure that yarn workspaces work properly.
The example app is located in the example
directory. Inside, you'll find three subdirectories:
-
app
- Where the example app source code is located -
fabric
- Sources necessary to run the bare React Native app on Fabric (the New Architecture) -
paper
- Sources necessary to run the paper React Native app on Paper (the Old Architecture) -
expo
- Sources of the expo-managed app
If you don't need to include expo or fabric/paper React Native app example, you can just remove the corresponding directory.
For launching the bare React Native example app:
yarn start|android|ios|pod
For the Expo React Native app:
yarn 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.