# 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. ## 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 peggyrayzis@gmail.com. ## 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!

	Stars	Issues	Version	Updated	Created
create-react-native-web-app	328	8	0.16.4	3 years ago	6 years ago
react-native-create-bridge			2.0.1	6 years ago	7 years ago
react-native-create-library			3.1.2	7 years ago	8 years ago

create-react-native-web-app vs react-native-create-bridge vs react-native-create-library

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past