React Native で Repro を利用

概要

公式ドキュメントには ReactNative での使用例は無いが、 ReactNative でも Repro を問題無く使用できた。

公式ドキュメントの Objective-C 版のコードを貼り付け、 Bridge できるようにしておき、 あとは JavaScript 側から呼び出せば良い。

イベントも取れるし、録画もできる。

環境

• React Native 0.52.0
• Repro 2.10.0

Repro は Cocoapods を利用してインストールした。

やったこと

例として、マスキング機能をJSから利用できるようにする。

※ AppDelegate.m にて Repro SDK の設定はしているものとする。

下記のような Objective C のモジュールを作成して

Bridge.h

# import <React/RCTBridgeModule.h>

@interface Bridge : NSObject <RCTBridgeModule>
@end

Bridge.m

# import "Bridge.h"
# import <React/RCTLog.h>
# import <Repro/Repro.h>

@import Firebase;

@implementation Bridge

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(maskReproMovie)
{
  CGFloat width = [UIScreen mainScreen].bounds.size.width;
  CGFloat height = [UIScreen mainScreen].bounds.size.height;
  [Repro maskWithRect:CGRectMake(0, 0, width, height) key:@"private"];
}

RCT_EXPORT_METHOD(unmaskReproMovie)
{
  [Repro unmaskForKey:@"private"];
}

@end

画面サイズを取得してマスクしている。

あとはJS側で

import { NativeModules } from 'react-native'

export const unmaskReproMovie = () => {
  if (__DEV__) {
    console.log('[Repro] Unmask Repro Movie')
  }
  NativeModules.Bridge.unmaskReproMovie()
}

みたいにしてあげればOK。

ただし、ネイティブのように要素を指定してマスキングの方法がわからなかったので（そもそも、JSの仮想DOMに対して指定することができるのか・・・？）、画面全体をマスキングした。

所感

初めてReproを使ったが、最高である。

• 導入までの手順が、今自分が何をしなければ良いのかが、非常に分かりやすい。
• SDKの導入、使用方法が分かりやすい。ドキュメントが良い。
• 管理画面のUIが非常に使いやすい。参考にしたい。