create-react-native-module
Advanced tools
Tool to create a React Native library module or view module with a single command
Tool to create a React Native library module or native view component, with a single command.
See below for command-line usage, example with no view, and example with an extremely simple native view.
This tool based on react-native-create-library, with working example callbacks, optional native view, and some other updates added by @brodybits (Christoper J. Brody aka Chris Brody).
LICENSE: MIT
If you are looking to create a native module for React Native, you need some native code for each platform you want to support and then some JavaScript code to bind it all together. Setting this up by yourself can be time-consuming.
This is where this tool comes in. It creates a boilerplate with all current best practices in mind.
Why not use react-native new-library? Unfortunately that command doesn't create an up-to-date library, requires an already initialized React Native project and only sets up the iOS side of things.
Requirements: Node 6.0+
Packages required to be installed globally if the recommended example app is generated:
$ npm install -g react-native-cli yarn
To install this package:
$ npm install -g create-react-native-module
Navigate into an empty directory to execute the command.
$ create-react-native-module MyFancyLibrary
This will create the folder MyFancyLibrary in which the library will be created in.
Now install dependencies by running this command in the newly created library.
$ npm install
Usage: create-react-native-module [options] <name>
Options:
-V, --version output the version number
--prefix <prefix> The prefix for the library module (Default: ``)
--module-name <moduleName> The module library package name to be used in package.json. Default: react-native-(name in param-case)
--module-prefix <modulePrefix> The module prefix for the library module, ignored if --module-name is specified (Default: `react-native`)
--package-identifier <packageIdentifier> (Android only!) The package name for the Android module (Default: `com.reactlibrary`)
--platforms <platforms> Platforms the library module will be created for - comma separated (Default: `ios,android`)
--github-account <githubAccount> The github account where the library module is hosted (Default: `github_account`)
--author-name <authorName> The author's name (Default: `Your Name`)
--author-email <authorEmail> The author's email (Default: `yourname@email.com`)
--license <license> The license type (Default: `Apache-2.0`)
--view Generate the module as a very simple native view component
--use-cocoapods Generate a library with a sample podspec and third party pod usage example
--generate-example Generate an example project and links the library module to it, requires both react-native-cli and yarn to be installed globally
--example-name <exampleName> Name for the example project (default: `example`)
--example-react-native-version <version> React Native version for the generated example project (default: `react-native@0.59`)
-h, --help output usage information
const createLibraryModule = require('create-react-native-module');
createLibraryModule({
name: 'MyFancyLibraryModule'
}).then(() => {
console.log('Oh yay! My library module has been created!');
})
{
name: String, /* The name of the library (Default: Library) */
prefix: String, /* The prefix for the library (Default: ``) */
moduleName: String, /* The module library package name to be used in package.json. Default: react-native-(name in param-case) */
modulePrefix: String, /* The module prefix for the library, ignored if moduleName is specified (Default: react-native) */
platforms: Array, /* Platforms the library will be created for. (Default: ['ios', 'android']) */
packageIdentifier: String, /* (Android only!) The package name for the Android module (Default: com.reactlibrary) */
githubAccount: String, /* The github account where the library is hosted (Default: `github_account`) */
authorName: String, /* The author's name (Default: `Your Name`) */
authorEmail: String, /* The author's email (Default: `yourname@email.com`) */
license: String, /* The license type of this library (Default: `Apache-2.0`) */
useCocoapods: Boolean, /* Generate a library with a sample podspec and third party pod usage example (Default: false) */
view: Boolean, /* Generate the module as a very simple native view component (Default: false) */
generateExample: Boolean, /* Generate an example project and links the library module to it, requires both react-native-cli and yarn to be installed globally (Default: false) */
exampleName: String, /* Name for the example project (Default: `example`) */
exampleReactNativeVersion: String, /* React Native version for the generated example project (Default: `react-native@0.59`) */
}
Create the module with no view:
create-react-native-module --prefix CB --package-identifier io.mylibrary --generate-example AliceHelper
The module would be generated in the react-native-alice-helper subdirectory, and the example test app would be in react-native-alice-helper/example.
Then go into the example app subdirectory:
cd react-native-alice-helper/example
Within the example test app subdirectory:
It is recommended to start the Metro Bundler manually (within react-native-alice-helper/example), which would run in the foreground:
npm start
Otherwise, React Native will open its own window to run the Metro Bundler.
To run on Android, do the following command (within react-native-alice-helper/example):
react-native run-android
This assumes that the ANDROID_HOME environmental variable is set properly. Here is a sample command that does not make such an assumption on a mac:
ANDROID_HOME=~/Library/Android/sdk react-native run-android
To run on iOS:
react-native run-ios
or do the following command to open the iOS project in Xcode:
open ios/example.xcodeproj
Expected result:
The example app shows the following indications:
Create the module with an extremely simple view:
create-react-native-module --prefix CB --package-identifier io.mylibrary --view --generate-example CarolWidget
The module would be generated in the react-native-carol-widget subdirectory, and the example test app would be in react-native-carol-widget/example.
Then go into the example app subdirectory:
cd react-native-carol-widget/example
Within the example test app subdirectory:
It is recommended to start the Metro Bundler manually as described above (within react-native-carol-widget/example):
npm start
To run on Android, do react-native run-android as described for the other example above.
To run on iOS, do react-native run-ios or open ios/example.xcodeproj as described for the other example above.
Expected result:
react-native-create-library - original basis of this projectreact-native-share - was acknowledged as "a great source of inspiration" for react-native-create-library0.6.0
FAQs
Tool to create a React Native library module or view module with a single command
The npm package create-react-native-module receives a total of 401 weekly downloads. As such, create-react-native-module popularity was classified as not popular.
We found that create-react-native-module demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.