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‑native
whose 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.md
files - includes a
Dockerfile
for creating a release example.apk
in '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 me@mail.org --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.
SwiftUI
component template is based on this approach by @Kureev