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

npm install --save react-native-create-bridge or yarn add react-native-create-bridge
From the root of your React Native project, run react-native new-module
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.

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<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>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
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<ReactPackage> {
  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 to learn more.

Goals

Delivers bridge module in Obj-C, Swift, Kotlin, & Java
Compatible with all versions of React Native, including v0.40+
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

Fork this repo & clone it
cd to where you cloned it
npm install or yarn
After you make changes, link your local package by running npm run package:dev
You can now run react-native new-module locally in a React Native project to test your changes
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 first.

This project adheres to the Contributor Covenant code of conduct. 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):

_{Kurtis Kemple} 💻	_{Duy Bao Nguyen} 💻	_{Mike Grabowski} 💬	_{Peggy Rayzis} 💻 📖 👀	_Mihovil 📝	_{André Neves} 👀
_{Jarret Moses} 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

appcoreopc / react-native-create-bridge Goto Github PK