make-react-native-package

CLI tool for bootstrapping react-native packages with Kotlin & Swift & Typescript

About

• 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

Getting started

$ npx make-react-native-package -p react-native-cool-component --githubUsername cool-github-user

Usage guide

$ 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

Workflow

Installation

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.

Development

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.

Publishing

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.

Created with MRNP

• iyegoroff/react-native-multi-segmented-control

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.

Credits

• SwiftUI component template is based on this approach by @Kureev