https://github.com/iyegoroff/make-react-native-package
CLI tool for bootstrapping react-native packages with Kotlin & Swift & Typescript
https://github.com/iyegoroff/make-react-native-package
componentkit jetpack-compose kotlin litho react-native swift swift-ui
Last synced: 9 months ago
JSON representation
CLI tool for bootstrapping react-native packages with Kotlin & Swift & Typescript
- Host: GitHub
- URL: https://github.com/iyegoroff/make-react-native-package
- Owner: iyegoroff
- License: mit
- Created: 2019-08-28T03:26:07.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T13:01:16.000Z (over 4 years ago)
- Last Synced: 2024-08-08T15:17:35.303Z (almost 2 years ago)
- Topics: componentkit, jetpack-compose, kotlin, litho, react-native, swift, swift-ui
- Language: Kotlin
- Homepage:
- Size: 1000 KB
- Stars: 36
- Watchers: 5
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# make-react-native-package
[](https://badge.fury.io/js/make-react-native-package)
[](https://circleci.com/gh/iyegoroff/make-react-native-package)
[](https://github.com/standard/standard)
[](https://david-dm.org/iyegoroff/make-react-native-package)
[](https://david-dm.org/iyegoroff/make-react-native-package?type=dev)
[](https://www.npmjs.com/package/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 me@mail.org
--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 && 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](https://circleci.com/pricing/#faq-section-linux) (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](https://npmjs.com) or imported from your other CircleCI project. When everything is ready run `npm 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](https://github.com/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](https://github.com/Kureev/ReactNativeWithSwiftUITutorial) by @Kureev