CLI tool for bootstrapping react-native packages with Kotlin & Swift & Typescript
- CLI tool:
- single command to scaffold a monorepo with package itself and ready-to-run example app
- can create any amount of dummy native components and modules inside same package
- has multiple component templates
- versioning doesn't follow 'semver', major and minor numbers match the ones from specific version of
react‑nativewhose project template is used by MRNP
- Bootstrapped package:
- supports
iOS&Android& react-native ">= 0.60.0" - contains (absolutely optional) basic CI setup: CircleCI -> lint & build -> npm
- has setup instructions for package end-users in generated
README.mdfiles - includes a
Dockerfilefor creating a release example.apkin 'neutral' environment
- supports
$ npx make-react-native-package -p react-native-cool-component --githubUsername cool-github-user
$ npx make-react-native-package --help
Usage
$ make-react-native-package <--packageName name> <--githubUsername user> ...
Required options
-p, --packageName string The name of project folder, github repo and npm package
-g, --githubUsername string Your github username
Options
-h, --help Print this usage guide
-a, --appName string Example app name
-o, --objcPrefix string Objective-C file prefix
-c, --components string[] List of space-separated native component names
-m, --modules string[] List of space-separated native module names
-d, --description string Package description
-n, --npmUsername string Your npm username
-e, --email string Your npm email
-w, --withoutConfirmation Skip confirmation prompt
-s, --skipInstall Skip dependency installation
-t, --templates string[] List of space-separated component templates:
ios:default - default Swift template
android:default - default Kotlin template
ios:swift-ui - SwiftUI component template
android:jetpack-compose - Jetpack Compose component template
ios:component-kit - ComponentKit Objective-C++ component template
android:litho - Litho Kotlin component template
Example
$ make-react-native-package --packageName react-native-cool-component
--githubUsername octocat --appName CoolExample --objcPrefix RNCC
--description "Cool description" --npmUsername wombat --email [email protected]
--templates ios:swift-ui android:jetpack-compose
Usually no additional steps required after bootstrapping a package. However, if you have skipped dependency installation with --skipInstall option you can setup everything later by running npm run init:package from package root folder.
Generated folder contains the package itself in the root and the sample app inside ./example folder.
Example app imports package dependency locally as a file:.. symlink, so all changes inside the root folder will be available for a running app and editors/IDEs immediately.
To watch on Typescript sources changes you have to run npm run watch commands from both root and ./example folders. Most of 'development' commands are located in ./example/package.json scripts section, and watch script from ./package.json probably is the only common 'development' command in the root folder.
To open a project in Xcode go to ./example/ios folder and open .xcworkspace file, package Swift sources should be found inside Pods > Development Pods > {{packageName}} group in project navigator.
To open a project from Android Studio 'welcome to' window press Import project and open ./example/android folder, after gradle sync task completes package Kotlin sources should be found inside {{packageName}} > java group in project tool window.
To build native code and run sample app on device/simulator just use standard react-native 'run' commands or 'run' buttons from Xcode/Android Studio.
There are two options: publishing from local machine or publishing from CircleCI.
To publish from a local machine just run npm version <your_package_next_version> && npm publish from package root folder. It will run linters and build Typescript sources in preversion hook and push changes and git tags to a remote repo in postversion hook. Then if everything succeed, the package will be published to npm.
If you have an account on CircleCI you can use it for publishing a package when git tags are being pushed to a remote repo. Note that before enabling your package in CircleCI dashboard you should either ask their support for macOS plan (it is free for open-source projects) or remove test-ios job related code from .circleci/config.yml file. Also you have to set NPM_TOKEN environment variable in CircleCI dashboard project settings - this token can be created directly on npmjs.com or imported from your other CircleCI project. When everything is ready run npm version <your_package_next_version> -m "%s [skip ci]" to initiate just publish job on CircleCI without triggering surplus test-ios & test-android jobs because of master branch changes. It won't only lint sources and build Typescript, but also will check that native code compiles (this can take some time). After both test-ios and test-android jobs succeed the publish job will be triggered.
Packages that were bootstrapped with MRNP most likely will contain Bootstrapped with make-react-native-package string marker in their README.md files, so they could be easily found with Github search.
SwiftUIcomponent template is based on this approach by @Kureev
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent