Skip to content

create.md

Latest commit

 

History

History
99 lines (70 loc) · 5.86 KB

create.md

File metadata and controls

99 lines (70 loc) · 5.86 KB
title Scaffold a React Native library

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

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.

Demo

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:

Turbo Modules and Fabric components don't have native support for Swift. If you want to write the iOS implementation in Swift for a Turbo Module or Fabric View, see Swift with Turbo Modules and Fabric.

Note: The C++ template is currently experimental and only works with includesGeneratedCode: true. This can make it incompatible with React Native versions other than the one used to generate the codegen files. See Including Generated Code into Libraries in the React Native docs for more details.