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