Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peggyrayzis/react-native-create-bridge
A CLI tool that bridges React Native modules & UI components with ease 🎉
https://github.com/peggyrayzis/react-native-create-bridge
bridge cli java kotlin objective-c react-native swift
Last synced: 9 days ago
JSON representation
A CLI tool that bridges React Native modules & UI components with ease 🎉
- Host: GitHub
- URL: https://github.com/peggyrayzis/react-native-create-bridge
- Owner: peggyrayzis
- License: mit
- Created: 2017-01-11T16:42:51.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T09:51:27.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T16:13:30.030Z (30 days ago)
- Topics: bridge, cli, java, kotlin, objective-c, react-native, swift
- Language: JavaScript
- Homepage:
- Size: 592 KB
- Stars: 1,021
- Watchers: 28
- Forks: 64
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - react-native-create-bridge
README
# react-native-create-bridge
Bridging native modules & UI components made easy! If you're a JavaScript developer writing your first lines of native code or a more experienced developer looking to eliminate boilerplate from your React Native workflow, this tool is for you.
# CONTRIBUTORS WANTED
## Getting Started
1. `npm install --save react-native-create-bridge` or `yarn add react-native-create-bridge`
2. From the root of your React Native project, run `react-native new-module`
3. The prompts will ask you for:
- Your bridge module name
- Whether you want to create a native module or UI component (or both!)
- The platforms and languages you would like to support. Currently, we default to iOS/Obj-C and Android/Java, but you can also choose iOS/Swift or Android/Kotlin if you prefer.
- The directory where you would like your JS files. If it doesn't exist, we'll create it for you.
4. That's it! 📦 Sit back and we'll deliver your native module for you lightning fast! ⚡️
## Next Steps
Depending on your environment, there may be a couple more steps that you have to take. In future versions of react-native-create-bridge, we want to eliminate these steps.
#### Android/Java
- To complete the bridging process, look for `MainApplication.java` in `android/app/src/main/java/com/yourapp`
- Add your package to the getPackages function like this:
```
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new YourModulePackage()
);
}
```
- Import your package at the top: `import com.yourapp.yourmodule.YourModulePackage;`
#### Android/Kotlin
##### Adding Kotlin support to your project:
- You will need to install the [Android Studio 3 preview](https://developer.android.com/studio/preview/index.html)
- In `android/build.gradle`, add `ext.kotlin_version = '1.1.2-4'` to the `buildscript` and `classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"` to your `dependencies`
- In `android/app/build.gradle`, add `apply plugin: 'kotlin-android'` to the top of the file. At the bottom, add `compile "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"` to your dependencies
- Now, you can convert any Java file to a Kotlin file by navigating to `Code > Convert Java file to Kotlin file` in the top menu
##### Completing the bridging process:
- If you already followed all the steps above, you can complete the bridging process by looking for `MainApplication.kt` in `android/app/src/main/java/com/yourapp`
- Add your package to the getPackages function like this:
```
override fun getPackages(): List {
return Arrays.asList(
MainReactPackage(),
YourModulePackage(),
)
}
```
- Import your package at the top: `import com.yourapp.yourmodule.YourModulePackage`
#### iOS/Obj-C
- Currently, you will need to add the files manually to your project in Xcode. Right click on the folder with your app name and select `Add Files To YourApp`. Select the files associated with your module and click `Add`
#### iOS/Swift
- If this is your first Swift module in your project, you will need to make sure you have a Obj-C bridging header to expose any Obj-C code to Swift. Read [Importing Obj-C into Swift](https://developer.apple.com/library/content/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html) to learn more.
## Goals
- [x] Delivers bridge module in Obj-C, Swift, Kotlin, & Java
- [x] Compatible with all versions of React Native, including v0.40+
- [x] Split out native UI components & modules into their own templates
- [ ] Config to remove comments for more experienced users
- [ ] Modifies existing project files (`AppDelegate.h`, `MainApplication.java`) to complete the bridging process
- [ ] Your feature request could be here! Open up an issue and give us feedback 😊
## Setting Up Dev Environment
1. Fork this repo & clone it
2. `cd` to where you cloned it
3. `npm install` or `yarn`
4. After you make changes, link your local package by running `npm run package:dev`
5. You can now run `react-native new-module` locally in a React Native project to test your changes
6. `npm run test` will run the Jest test suite
## Contributing
`react-native-create-bridge` is a new project and we would love feedback from the community on how it should evolve. Please report any 🐞s and let us know how you're using `react-native-create-bridge`!
If you would like to contribute, please read the [contributor guidelines](https://github.com/peggyrayzis/react-native-create-bridge/blob/master/CONTRIBUTING.md) first.
This project adheres to the Contributor Covenant [code of conduct](http://contributor-covenant.org/version/1/3/0/).
By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].
## Contributors
A big thank you goes out to these awesome people for their contributions ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Kurtis Kemple](https://twitter.com/kurtiskemple)
[💻](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=kkemple "Code") | [
Duy Bao Nguyen](https://github.com/bduyng)
[💻](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=bduyng "Code") | [
Mike Grabowski](https://github.com/grabbou)
[💬](#question-grabbou "Answering Questions") | [
Peggy Rayzis](https://twitter.com/peggyrayzis)
[💻](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=peggyrayzis "Code") [📖](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=peggyrayzis "Documentation") [👀](#review-peggyrayzis "Reviewed Pull Requests") | [
Mihovil](https://github.com/Air-Miha)
[📝](#blog-Air-Miha "Blogposts") | [
André Neves](http://andrenev.es)
[👀](#review-andrerfneves "Reviewed Pull Requests") |
| :---: | :---: | :---: | :---: | :---: | :---: |
| [
Jarret Moses](https://github.com/jarretmoses)
[💻](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=jarretmoses "Code") [📖](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=jarretmoses "Documentation") |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!