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.
npm install -g react-native-create-bridge
oryarn global add react-native-create-bridge
- From the root of your React Native project, run
create-bridge
- 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! β‘οΈ
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.
- To complete the bridging process, look for
MainApplication.java
inandroid/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;
- You will need to install the Android Studio 3 preview
- In
android/build.gradle
, addext.kotlin_version = '1.1.2-4'
to thebuildscript
andclasspath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
to yourdependencies
- In
android/app/build.gradle
, addapply plugin: 'kotlin-android'
to the top of the file. At the bottom, addcompile "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
- If you already followed all the steps above, you can complete the bridging process by looking for
MainApplication.kt
inandroid/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
- To complete the bridging process, look for
AppDelegate.h
inios/yourapp
- Add
#import <YourModule/YourModule.h>
to the top of the file
- 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.
- 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 π
- Fork this repo & clone it
cd
to where you cloned itnpm install
oryarn
- After you make changes, link your local package by running
npm run package:dev
- You can now run
create-bridge
locally in a React Native project to test your changes npm run test
will run the Jest test suite
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
!
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].