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

Transcript

1. )PX
   UP
   $SFBUF
   /BUJWF
   .PEVMFT React Native Japan Meetup #9 By Takuya Matsuyama 2018/09/13
2. Takuya Matsuyama @inkdrop_app @craftzdog (japanese) Freelancer based in Japan !2 I’m earning subsistence revenues from my product instead of freelance works recently
3. !3
4. Built on top of React Native !4
5. 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
6. 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
7. 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
8. 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
9. Add `hello` method • An empty module !9 // ios/RNMyLibrary.m #import "RNMyLibrary.h" @implementation RNMyLibrary RCT_EXPORT_MODULE() @end
10. • 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
11. 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"; } }
12. • @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
13. Call `hello` from RN !13 import MyLibrary from 'react-native-my-library' MyLibrary.hello('World')
14. 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); } }
15. 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(); }
16. 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();
17. 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
18. 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.
19. Thank You! !19 @inkdrop_app @craftzdog (japanese)