If you want to create your own React Native library, scaffolding the project can be a daunting task. create-react-native-library can scaffold a new project for you with all the necessary tools configured.

#Features

• Minimal boilerplate for libraries on which you can build upon
• Example React Native app to test your library code
• TypeScript to ensure type-safe code and better DX
• Support for Turbo Modules & Fabric
• Support for Kotlin on Android & Swift on iOS
• Support for C++ to write cross-platform native code
• Expo for libraries without native code and web support
• ESLint, Prettier, TypeScript, Lefthook and Release It pre-configured
• react-native-builder-bob pre-configured to compile your files
• GitHub Actions pre-configured to run tests and lint on the CI

#Usage

To create new project, run the following:

npx create-react-native-library@latest awesome-library

This will ask you a few questions about your project and generate a new project in a folder named awesome-library.

After the project is created, you can find the development workflow in the generated CONTRIBUTING.md file.

Note: If you want to create a library using the legacy native modules and view APIs instead of the new architecture, you can use the 0.49.8 version of create-react-native-library: npx create-react-native-library@0.49.8 awesome-library.

#Local library

While the default templates are for libraries that are published to npm, you can also create a local library that is not published but used locally in your app.

You'd typically use a local library when:

• You're building a native library for your app and don't want to publish it to npm.
• You want to be able to easily copy the library to other projects.
• You're in a monorepo and want to keep the library code in the same repository as the app.
• You're using Expo, but want to use vanilla React Native API for native modules and components.

The structure of the app with a local library may look like this:

MyApp
├── node_modules
├── modules              <-- folder for your local libraries
│   └── awesome-library  <-- your local library
├── android
├── ios
├── src
├── index.js
└── package.json

If you run create-react-native-library in an existing project containing a package.json, it'll be automatically detected and you'll be asked if you want to create a local library. You can also pass the --local flag to the command to explicitly create a local library:

npx create-react-native-library@latest awesome-library --local

The local library is created outside of the android and ios folders and makes use of autolinking to integrate with your app. It also doesn't include a separate example app and additional dependencies that are configured in the default templates. This is an alternative approach to the setup mentioned in React Native docs.

The advantages of this approach are:

• It's easier to upgrade React Native as you don't need to worry about custom code in android and ios folders.
• It can be used with Expo managed projects with custom development client.
• It's easier to copy the library to other projects or publish later if needed.
• The boilerplate for the library doesn't need to be written from scratch.
• It can be used with monorepos where the additional tooling in the default templates may not be needed.

By default, the generated library is automatically linked to the project using link: protocol when using Yarn and file: when using npm:

"dependencies": {
  "react-native-awesome-library": "link:./modules/awesome-library"
}

This creates a symlink to the library under node_modules which makes autolinking work. But if you're using a monorepo or have non-standard setup, you'll need to manually set up the package to be linked to your app based on your project setup.

#Writing native code

Once the project is created, you can follow the official React Native docs to learn the API for writing native modules and components:

• Native Modules
• Native UI Components for Android
• Native UI Components for iOS
• Turbo Modules
• Fabric Components