Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Create Native Modules @ React Native Jap...

How to Create Native Modules @ React Native Japan Meetup #9

- My Product Built with React Native: https://www.inkdrop.info/
- Native Modules that I’ve Made
- What Should I Make It For?
- Set up New Module
- Project Overview
- Add `hello` method
- Call `hello` from RN
- Run in Background Thread
- All You Have to Do is Just To Follow Simple Rules
- But It’s The Last Resort

Takuya Matsuyama

September 13, 2018
Tweet

More Decks by Takuya Matsuyama

Other Decks in Programming

Transcript

  1. Takuya Matsuyama @inkdrop_app @craftzdog (japanese) Freelancer based in Japan !2

    I’m earning subsistence revenues from my product instead of freelance works recently
  2. !3

  3. Native Modules that I’ve Made •react-native-sqlite-2 ‣ SQLite3 plugin that

    supports storing NULL characters •react-native-japanese-tokenizer ‣ A lightweight Japanese tokenizer !5
  4. What Should I Make It For? Things RN Can’t Do

    • To use Native APIs or Libraries ‣ Database, Image processing, etc. • Multi-threading ‣ Process massive data without blocking UI !6
  5. Set up New Module • Use react-native-create-library ‣ It helps

    scaffold new projects ‣ You don’t need to understand each file !7 $ npm install -g react-native-create-library $ react-native-create-library MyLibrary
  6. Project Overview • There are directories for each platform •

    You can remove the directories which it will not support !8 . ├── android/ ├── ios/ ├── windows/ ├── README.md ├── index.js └── package.json 3 directories, 3 files
  7. Add `hello` method • An empty module !9 // ios/RNMyLibrary.m

    #import "RNMyLibrary.h" @implementation RNMyLibrary RCT_EXPORT_MODULE() @end
  8. • RCT_EXPORT_METHOD Exports the Method to RN !10 // ios/RNMyLibrary.m

    #import "RNMyLibrary.h" @implementation RNMyLibrary RCT_EXPORT_MODULE() RCT_EXPORT_METHOD(hello:(NSString *)name) { RCTLogInfo(@"Hello, %@", name); } @end Add `hello` method
  9. Add `hello` method • An empty module !11 // android/src/main/java/com/reactlibrary/RNMyLibraryModule.java

    package com.reactlibrary; import …; public class RNMyLibraryModule extends ReactContextBaseJavaModule { private final ReactApplicationContext reactContext; public RNMyLibraryModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } @Override public String getName() { return "RNMyLibrary"; } }
  10. • @ReactMethod Exports the Method to RN !12 // android/src/main/java/com/reactlibrary/RNMyLibraryModule.java

    package com.reactlibrary; import …; public class RNMyLibraryModule extends ReactContextBaseJavaModule { private final ReactApplicationContext reactContext; public RNMyLibraryModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } @Override public String getName() { return "RNMyLibrary"; } @ReactMethod public void hello(String name) { Log.d("RNMyLibrary", String.format("Hello, %s", name)); } } Add `hello` method
  11. Run in Background Thread • Specify a GCD queue in

    which every method will be executed • Return a result with Promise !14 - (dispatch_queue_t)methodQueue { return dispatch_queue_create(“my.library", DISPATCH_QUEUE_SERIAL); } RCT_EXPORT_METHOD(doSomething:(NSString *)param resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { NSArray * result = ...; if (result) { resolve(result); } else { NSError *error = ...; reject(@"my_error", @"Unexpected error", error); } }
  12. Run in Background Thread • Use Thread and Runnable •

    Return a result with Promise !15 @ReactMethod public void doSomething(final String param, final Promise promise) { new Thread(new Runnable() { public void run() { // …… promise.resolve(SOMETHING); } catch (Exception e) { promise.reject(“MY_ERROR", e); } } }).start(); }
  13. Invocation • Return value will be a Promise • You

    can use async/await !16 async function doIt() { try { var result = await MyLibrary.doSomething('foo'); } catch (e) { console.error(e); } } doIt();
  14. All You Have to Do is… Just To Follow Simple

    Rules • So the Actual Dev Cost Basically Depends on ‣ What You Want ‣ How Familiar You are on Each Platform !17
  15. But It’s The Last Resort • Hard to Maintain ‣

    You always have to care both platforms ‣ Breaking changes of React Native ‣ Hard to debug !18 You should only make it when it’s impossible to solve a problem on RN side.