
react-native でエラーメッセージなどを表示したいので、何かライブラリなどを選定していたら、[react-native-dropdownalert](https://github.com/testshallpass/react-native-dropdownalert)が割と良さそうなので、[react-native-router-flux](https://github.com/aksonov/react-native-router-flux)と一緒に使ってみました。

コードは GitHub に置いてあります。Snack Expo で実機でもすぐ試せます。

- [mitsuruog/react-native-dropdownalert-router-sample](https://github.com/mitsuruog/react-native-dropdownalert-router-sample)
- [Snack Expo](https://snack.expo.io/@mitsuruog/cmVhY3)

## react-native-dropdownalert の基本的な使い方

基本的な使い方は DropDownAlert を表示した View の一番下に`DropdownAlert`を配置して、この`ref`を使ってメッセージを表示させる感じです。
初見、ちょっと癖があって導入に一手間必要そうだなと思いました。

```js
// ...
import DropdownAlert from "react-native-dropdownalert";

export const One = () => (
  <View style={styles.container}>
    <Text>One</Text>
    <Button
      title="Press to show the Alert"
      onPress={() =>
        this.dropdown.alertWithType("error", "Error", "Alert shows inside ;(")
      }
    />
    // コンポーネントツリーの一番最後に置くこと！
    <DropdownAlert ref={(ref) => (this.dropdown = ref)} />
  </View>
);

// ...
```

結果は。。。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-dropdownalert-demo1.gif)

NavBar の内側に表示されてしまいました。
どうやら Route 設定しているコンポーネントの外側に置く必要があるみたいです。

## DropdownAlert を NavBar の上に出す

DropdownAlert を Route 設定の外側に置くことは簡単ですが、どうやって他のコンポーネントから操作しようかと頭を悩ませていたところ、こんな Issue があって助かりました。

- [Stack Navigator · Issue \#73 · testshallpass/react\-native\-dropdownalert](https://github.com/testshallpass/react-native-dropdownalert/issues/73)

`DropDownHolder`という DropdownAlert の`ref`の参照を保存するクラスを作成して、これを他のコンポーネントから使う方式です。

シンプル。まさに目から鱗ですね。実際のコードでは`AlertHelper`としました。

```js
// AlertHelper.js
export class AlertHelper {
  static dropDown;

  static setDropDown(dropDown) {
    this.dropDown = dropDown;
  }

  static show(type, title, message) {
    if (this.dropDown) {
      this.dropDown.alertWithType(type, title, message);
    }
  }
}
```

`App.js`などの Route 設定の外側に DropdownAlert を置いて、`AlertHelper`の`setDropDown`で ref を保存しておきます。

```js
// App.js
// ...
import { AlertHelper } from "./pages/AlertHelper";

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <AppRoute />
        <DropdownAlert ref={(ref) => AlertHelper.setDropDown(ref)} />
      </View>
    );
  }
}
```

他のコンポーネントでは`AlertHelper`の`show`を呼び出すことでメッセージを表示することができます。

```js
// Three.js
// ...
import { AlertHelper } from "./AlertHelper";

export const Three = () => (
  <View style={styles.container}>
    <Text>Three</Text>
    <Button
      title="Press to show the Info"
      onPress={() => AlertHelper.show("info", "Info", "Looks good!!")}
    />
  </View>
);
```

結果は正しく出ましたね。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-dropdownalert-demo2.gif)

## Android の StatusBar と重なる場合の対処方法

正しく出たと思ったのですが、Android の実機で試したところ、メッセージが StatusBar と重なってしまっていました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-dropdownalert-demo4.gif)

あー、やだやだ。クロスプラットフォーム。react-native の闇を垣間見た気がします。

色々やり方調べていたら DropdownAlert の`style`に StatusBar の height を追加して回避する方法が良さそうなので試してみました。

```diff
// App.js

// ...

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <AppRoute />
        <DropdownAlert
+         defaultContainer={{ padding: 8, paddingTop: StatusBar.currentHeight, flexDirection: 'row' }}
          ref={ref => AlertHelper.setDropDown(ref)}
        />
      </View>
    );
  }
}
```

- [Android statusbar showing on top of alert · Issue \#127 · testshallpass/react\-native\-dropdownalert](https://github.com/testshallpass/react-native-dropdownalert/issues/127)

これで実機でも正しく表示することができました。

### おまけ

GitHub には DropdownAlert を閉じた時に`onClose`のコールバックを受け取るコードも書かれています。興味あれば覗いてみてください。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-dropdownalert-demo3.gif)

> 最近、react-native を「`RN`」に省略したい人の気持ちがわかってきた気がします。
> 自分は頑張って「react-native」と書き続けたいと思います。


react-native-dropdownalertをreact-native-router-fluxと一緒に使う


react-native プロダクトでベースとなる UI コンポーネントライブラリを探していたら、ちょうどいいタイミングで
[react-native-elements](https://github.com/react-native-training/react-native-elements) が v1 になったので使ってみることにしました。

v1 の目玉機能の一つに Theme があります。
基本的な使い方は、自身でカスタム Theme を作成してから`ThemeProvider`にその Theme を渡すだけで動くのですが、一度設定した Theme をプログラムにて変更する場合に一癖あったので、その辺りを紹介します。

Theme についての公式のドキュメントはこちらです。

- [Customization · React Native Elements](https://react-native-training.github.io/react-native-elements/docs/customization.html)

## Theme の基本的な使い方

まずカスタム Theme を作成します。Theme のオブジェクトフォーマットについては[こちら](https://react-native-training.github.io/react-native-elements/docs/customization.html#the-theme-object)を参照してください。

```js
const theme = {
  colors: {
    primary: "green",
  },
};
```

これを App.js などの上位のコンポーネントに`ThemeProvider`を置いて Theme を設定して読み込ませれば大丈夫です。

```js
// App.js

  ...

  render() {
    return (
      <ThemeProvider theme={theme}>
        <AppRoute /> // react-native-router-fluxなどのRoute設定コンポーネント
      </ThemeProvider>
    );
  }

```

## Theme を動的に変更する

さて、Theme を動的に変更してみましょう。`ThemeProvider`は`theme`を props に持っているので、これを変更すれば Theme も変更できそうですが、実際には変更できません。

- [Question: Is it possible to toggle active Theme at runtime? · Issue \#1714 · react\-native\-training/react\-native\-elements](https://github.com/react-native-training/react-native-elements/issues/1714)

props での Theme の変更をゆるしてしまった場合、全てのコンポーネント  ツリーのコンポーネントが再描画されてしまうため、これを避けるために`withTheme` HOC(High Order Component)か`ThemeConsumer`を使って`updateTheme`を呼び出す必要があるようです。

今回は`withTheme`を使ってみました。

## withTheme を使った Theme の変更

まず Theme の変更をトリガーするコンポーネントを`withTheme`でラップします。ラップされたコンポーネントには props に`updatetheme`と`theme`が渡されてくるので、`updateTheme`に変更後の Theme を設定します。

```js
// Child.js
const Child = (props) => {
  return (
    <View>
      <Button
        title="Change theme"
        onPress={() => props.updateTheme({ colors: { primary: "blue" } })}
      />
    </View>
  );
};

export default withTheme(Child);
```

実際の画面はこんな感じで切り替わります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-elements1.gif)


react-native-elementsで動的にThemeを変更する


react-native のプロジェクトで[react-styleguidist](https://github.com/styleguidist/react-styleguidist)を使う方法です。

コードのサンプルは本家の方に PR 送ったのでこちらの見てください。

- <https://github.com/styleguidist/react-styleguidist/tree/master/examples/react-native>

> 本家の方でコードが変わっている場合もあります。ご注意ください。

使っているライブラリなどのバージョンは次の通りです。

- expo: 32.0.0
- react-styleguidist: 8.0.6
- react: 16.5.0
- react-dom: 16.7.0
- react-native-web: 0.10.0
- @babel/core: 7.2.2

Expo を使ってますが、react-native のプロジェクトでも大まかな手順はほとんど同じだと思います。

## 動作の仕組み

react-styleguidist には react-native で動作させるための仕組みがないので、[react-native-web](https://github.com/necolas/react-native-web)を使って react-native の UI コンポーネントを Web で表示できるように変換して表示します。

簡単な図に表すと次のような仕組み  に  なっています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-react-styleguidist1.jpg)

通常は react-native は[Metro bundler](https://facebook.github.io/metro/)を通して実行可能な形式になりますが、react-native-web で動かす場合は、[Babel](https://babeljs.io/)を  使って  トランスパイルを行ってから、react-styleguidist で処理します。

## react-styleguidist の導入

### react-styleguidist とその  依存モジュールをインストール

react-styleguidist とその依存モジュールをインストールします。

```sh
npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/polyfill @babel/preset-env babel-loader babel-plugin-react-native-web file-loader metro-react-native-babel-preset react-dom react-native-web react-styleguidist webpack
```

注意点としては、react-native v0.57 から[babel-preset-react-native](https://www.npmjs.com/package/babel-preset-react-native)は[metro-react-native-babel-preset](https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset)に置き換わっていて、Babel も 7 系を  使うようになっています。古いサンプルなどは依存関係のバージョンに注意してください。

> `react-art`が依存関係に見つからないというエラーが出る場合は、npm インストールしてください。

### styleguide.config.js を設定  する

styleguide.config.js を追加します。

```js
// styleguide.config.js
const webpack = require("webpack");

module.exports = {
  require: ["@babel/polyfill"],
  components: "src/**/[A-Z]*.js",
  webpackConfig: {
    resolve: {
      // auto resolves any react-native import as react-native-web
      alias: { "react-native": "react-native-web" },
      extensions: [".web.js", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: "babel-loader",
          exclude: [/node_modules/],
          options: {
            plugins: [
              "@babel/proposal-class-properties",
              "@babel/proposal-object-rest-spread",
              "react-native-web",
            ],
            presets: [
              "@babel/preset-env",
              "module:metro-react-native-babel-preset",
            ],
            babelrc: false,
          },
        },
        {
          test: /\.(jpe?g|png|gif)$/i,
          use: [
            {
              loader: "file-loader",
              options: {
                hash: "sha512",
                digest: "hex",
                name: "[hash].[ext]",
              },
            },
          ],
        },
        {
          test: /\.ttf$/,
          loader: "file-loader",
        },
      ],
    },
    // Most react native projects will need some extra plugin configuration.
    plugins: [
      // Add __DEV__ flag to browser example.
      new webpack.DefinePlugin({
        __DEV__: process.env,
      }),
    ],
  },
};
```


注意点としては、webpack の`resolve.alias`オプションで、`react-native`の参照先を`react-native-web`に置き換えている部分です。これで内部で宣言されている react-native 部分を react-native-web に豪快に置き換えています。

 実際のファイルはこちらです。

- <https://github.com/mitsuruog/react-styleguidist/blob/master/examples/react-native/styleguide.config.js>

これで`npm run styleguide`をすると、次のような画面が表示されます。
![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-react-styleguidist2.png)

## まとめ

最近、react-native を仕事で使うことが多いので react-styleguidist が動かせるかどうか調べてみました。

`react-native`の参照先を`react-native-web`に置き換えているため、実際の再現度など細かな部分で差異がありそうです。

- [react\-native\-web: Compatibility with React Native](https://github.com/necolas/react-native-web#compatibility-with-react-native)

> 自分の場合は、採用を検討した結果、`react-native-web`部分に不安があるので見送りました。


react-nativeでreact-styleguidistを使う


react-native で Swift の Native module を呼び出す方法です。基本的には下の Blog のやり方を真似ています。

- [Swift in React Native \- The Ultimate Guide Part 1: Modules](https://teabreak.e-spres-oh.com/swift-in-react-native-the-ultimate-guide-part-1-modules-9bb8d054db03)

紹介する内容は次の通りです。

- 簡単な Counter を Native Module で実装した
- Native Module の呼び出し
- Native Module から Constants を受け取る
- Native Module からの Callback を扱う
- Native Module からの Promise を扱う
- Native Module からの Event を扱う

対象のバージョンは次の通りです。

- react-native: 0.57.8
- Swift: 4.2.1
- Xcode: 10.1

プロジェクト全体のコードは GitHub で見ることができます。

- <https://github.com/mitsuruog/react-native-call-native-module-sample>

ちなみに Swift と Objecvive-C は初めて書きました。

## Native Module の呼び出し

まず、`Counter.swift`という Swift のクラスを作成します。
この時に Objective-C Bridging Header の設定をするか確認されるので、「Create Bridging Header」を選択して Bride Header ファイルを作成します。

このようなダイアログが表示されるはずです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/swift-react-native1.png)

> Bride Header ファイルは、一度設定されると Xcode のプロジェクトファイルで管理されているため、手動でファイル名などを変更することは避けましょう。

Bride Header ファイルに react-native のモジュールをインポートしておきます。

```c
// Bridging-Header.h

#import "React/RCTBridgeModule.h"
```

続いて、Swift クラスに Counter クラスを定義します。

```swift
// Counter.swift

import Foundation

@objc(Counter)
class Counter: NSObject {
}
```

次に Objective-C のファイルを作成して、Native Module を JavaScript 側に公開するためのマクロを登録します。

`RCT_EXTERN_MODULE`の最初の引数が JavaScript 側に公開される名前で、第 2 引数が Native Module の Super Class を渡します。

```
// Counter.m

#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(Counter, NSObject)
@end
```

react-native 側では`NativeModules`の中に、先ほど定義したモジュール名で Native Module が渡されてくるので、これを利用します。

```js
// App.js
import { NativeModules } from "react-native";

const { Counter } = NativeModules;

// 何かの処理
// Counter.doSomething();
```

これで Native Module を react-native 側で利用する準備が整いました。

## Native Module から Constants を受け取る

Native Module 側から counter の初期値を返します。

`Counter.swift`に`constantsToExport`メソッドを追加します。react-native 側に渡したいものを dictionary の中に設定していきます。

続いて`requiresMainQueueSetup`メソッドも追加します。これはこのクラスの初期化をメインスレッドかバックグラウンドスレッドのどちらで行うかを指定するためのものです。
 何も指定しない場合、次のような警告が表示されます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/swift-react-native2.png)

```java
// Counter.swift

  ...

  @objc
  override func constantsToExport() -> [AnyHashable : Any]! {
    return ["initialCount": 0]
  }

  @objc
  static func requiresMainQueueSetup() -> Bool {
    // true  - メインスレッドで初期化される
    // false - メバックグラウンドスレッドで初期化される
    return true
  }
}
```

react-native 側では、`initialCount`は次のように利用することができます。

```js
// App.js
console.log(Counter.initialCount); // => 0
```

## Native Module からの Callback を扱う

現在の count を返す`getCount`メソッドを実装します。

Callback は`RCTResponseSenderBlock`クラスで定義されているので、これを引数で受け取って Callback を実行します。

```swift
// Counter.swift

@objc(Counter)
class Counter: RCTEventEmitter {

  private var count = 0

  ...

  @objc
  func getCount(_ callback: RCTResponseSenderBlock) {
    callback([count])
  }
}
```

続いて`Counter.m`にメソッドを追加します。

```objc
// Counter.m

@interface RCT_EXTERN_MODULE(Counter, NSObject)
  RCT_EXTERN_METHOD(getCount: (RCTResponseSenderBlock)callback)
@end
```

react-native 側では次のように利用します。

```js
// App.js
Counter.getCount((count) => console.log(count)); // => 0
```

## Native Module からの Promise を扱う

次は Promise を扱ってみます。

`decrement`メソッドを実装します。正しく減算できた場合は`resolve`を、count が 0 で減算しようとした場合に`reject`を返すようにします。

Promise は`resolve`の場合の`RCTPromiseResolveBlock`と`reject`の場合の`RCTPromiseRejectBlock`を利用します。

reject する場合は、第 3 引数に Error オブジェクトが必要なので、`NSError`でエラーを作成しておきます。

```swift
// Counter.swift

@objc(Counter)
class Counter: NSObject {

  ...

  @objc
  func decrement(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) -> Void {
    if (count == 0) {
      let error = NSError(domain: "", code: 200, userInfo: nil)
      reject("E_COUNT", "count count cannot be negative.", error)
    } else {
      count -= 1
      resolve("count was decremented.")
    }
  }
}
```

続いて`Counter.m`にメソッドを追加します。

```diff
// Counter.m

@interface RCT_EXTERN_MODULE(Counter, NSObject)
  RCT_EXTERN_METHOD(getCount: (RCTResponseSenderBlock)callback)
+  RCT_EXTERN_METHOD(decrement: (RCTPromiseResolveBlock)resolve rejecter: (RCTPromiseRejectBlock)reject)
@end
```

react-native 側では通常の Promise と同じように扱うことができます。

```js
// App.js
Counter.decrement()
  .then((count) => console.log(count))
  .catch((error) => console.error(error));
```

## Native Module から Event を受け取る

最後に decrement した時に、`onDecrement`イベントが発火するようにして、これを react-native 側で利用できるようにします。

Event を react-native 側に送るには`RCTEventEmitter`が必要なので、`Counter.m`を変更してインポートしておきます。

```diff
// Counter.m
#import "React/RCTBridgeModule.h"
+ #import "React/RCTEventEmitter.h"

- @interface RCT_EXTERN_MODULE(Counter, NSObject)
+ @interface RCT_EXTERN_MODULE(Counter, RCTEventEmitter)
  ...
@end
```

続いて`Counter.swift`を変更します。

まずクラスを`RCTEventEmitter`のサブクラスにします。次に`supportedEvents`を実装して、Native Module から発火されるイベント名を返すようにします。
最後に`requiresMainQueueSetup`を override に変更します。

```diff
// Counter.swift

@objc(Counter)
- class Counter: NSObject {
+ class Counter: RCTEventEmitter {

  ...

+  @objc
+  override func supportedEvents() -> [String]! {
+    return ["onDecrement"]
+  }

  @objc
-  static func requiresMainQueueSetup() -> Bool {
+  override static func requiresMainQueueSetup() -> Bool {
    ...
  }

  ...

}
```

react-native 側にイベントを送るには`sendEvent`を使います。送るペイロードは`Map`を使って準備します。

```diff
// Counter.swift

  ...

  @objc
  func decrement(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) -> Void {
    if (count == 0) {
      let error = NSError(domain: "", code: 200, userInfo: nil)
      reject("E_COUNT", "count count cannot be negative.", error)
    } else {
      count -= 1
+      sendEvent(withName: "onDecrement", body: ["count": count])
      resolve("count was decremented.")
    }
  }
}
```

react-native 側では`NativeEventEmitter`の中に Native Module のインスタンスを設定して EventEmitter を取得します。
あとは、EventEmitter に EventListener を設定すれば OK です。

```js
// App.js
import { NativeModules, NativeEventEmitter } from "react-native";

const counterEventEmitter = new NativeEventEmitter(Counter);

counterEventEmitter.addListener("onDecrement", ({ count }) => {
  console.log(count); // => 1
});
```

## まとめ

react-native で Swift の Native module を呼び出す方法についてでした。

Objective-C を書いていたら、遠い昔に触って挫折した苦い記憶が蘇ってきました。

JavaScript 側は Android と同じ形で処理できるので、マルチプラットフォームの Native Module を扱う場合は、両者を等しく扱えるような I/F 設計が重要な気がします。


react-nativeでNative moduleを呼び出す(Swift編)


react-native で Android の Native module を呼び出す方法です。基本的には下の公式ドキュメントのやり方を真似ていますが、一部そのままでは動作しなかった部分があるため、その辺りも紹介します。

- [Native Modules · React Native](https://facebook.github.io/react-native/docs/native-modules-android)

紹介する内容は次の通りです。

- 簡単な Counter を Native Module で実装した
- Native Module の呼び出し
- Native Module から Constants を受け取る
- Native Module からの Callback を扱う
- Native Module からの Promise を扱う
- Native Module からの Event を扱う

対象のバージョンは次の通りです。

- react-native: 0.57.8
- Android SDK: 27(Oreo)

プロジェクト全体のコードは GitHub で見ることができます。

- <https://github.com/mitsuruog/react-native-call-native-module-sample>

ちなみに Android 開発はほとんどやったことがありません。

## Native Module の呼び出し

まず`ReactContextBaseJavaModule`を継承した`CounterModule.java`を作成します。
その中に`getName`メソッドを作成して、このモジュール名を返すようにします。このモジュール名を react-native 側で利用します。

```java
// CounterModule.java
public class CounterModule extends ReactContextBaseJavaModule {
  public CounterModule(ReactApplicationContext reactApplicationContext) {
    super(reactApplicationContext);
  }

  @Override
  public String getName() {
    return "Counter";
  }
}
```

続いて`ReactPackage`を実装した`CounterPackage.java`を作成します。
中身は新しく追加した react-native 側で利用できるように登録するためのものなので、あまり細かいことは気にせず、公式ドキュメントのまま実装していきます。

```java
// CounterPackage.java
public class CounterPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new CounterModule(reactContext));
    return modules;
  }
}
```

そして`MainApplication.java`の`getPackages`メソッドに`CounterPackage`を追加して react-native 側から参照できるようにします。

```diff
// MainApplication.java
public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
+              new CounterPackage(),
              new CalendarManagerPackage()
      );
    }
  }

  ...

}
```

react-native 側では`NativeModules`の中に、先ほど定義したモジュール名で Native Module が渡されてくるので、これを利用します。

```js
// App.js
import { NativeModules } from "react-native";

const { Counter } = NativeModules;

// 何かの処理
// Counter.doSomething();
```

これで Native Module を react-native 側で利用する準備が整いました。

## Native Module から Constants を受け取る

Native Module 側から counter の初期値を返します。

`CounterModule.java`に`getConstants`メソッドを追加します。react-native 側に渡したいものを`HashMap`の中に設定していきます。

```java
// CounterModule.java

  ...

  @Override
  public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put("initialCount", 0);
    return constants;
  }
```

react-native 側では、`initialCount`は次のように利用することができます。

```js
// App.js
console.log(Counter.initialCount); // => 0
```

## Native Module からの Callback を扱う

現在の count を返す`getCount`メソッドを実装します。

Callback は`Callback`クラスで定義されているので、これを引数で受け取って`invoke`で Callback を実行します。

```java
// CounterModule.java
public class CounterModule extends ReactContextBaseJavaModule {

  private int count = 0;

  ...

  @ReactMethod
  public void getCount(Callback callback) {
    callback.invoke(count);
  }
}
```

> Native Module から react-native 側に公開するメソッドには`@ReactMethod`アノテーションをつける必要があります。
> また、react-native と Native Module 間のやりとりは常に非同期であるため、戻り値は常に`void`になります。

react-native 側では次のように利用します。

```js
// App.js
Counter.getCount((count) => console.log(count)); // => 0
```

## Native Module からの Promise を扱う

次は Promise を扱ってみます。

`decrement`メソッドを実装します。正しく減算できた場合は`resolve`を、count が 0 で減算しようとした場合に`reject`を返すようにします。

Promise は`Promise`クラスで定義されているので、これを引数で受け取ってそれぞれ`resolve`と`reject`を実行します。（シンプルでわかりやすいですね）

```java
// CounterModule.java

  ...

  @ReactMethod
  public void decrement(Promise promise) {
    if (count == 0) {
      promise.reject("E_COUNT", "count count cannot be negative.");
    } else {
      count = count - 1;
      promise.resolve(count);
    }
  }
```

react-native 側では通常の Promise と同じように扱うことができます。

```js
// App.js
Counter.decrement()
  .then((count) => console.log(count))
  .catch((error) => console.error(error));
```

## Native Module から Event を受け取る

最後に decrement した時に、`onDecrement`イベントが発火するようにして、これを react-native 側で利用できるようにします。

Event を react-native 側に送るには`ReactContext`が必要なので、`this.getReactApplicationContext()`から取得します。これを使ってイベントを通知します。

> 公式ドキュメントだと`ReactContext`をどう取得すればいいか記載がありません。

react-native 側に送るペイロードは`WritableMap`を使って準備します。

```java
// CounterModule.java

  ...

  @ReactMethod
  public void decrement(Promise promise) {
    if (count == 0) {
      promise.reject("E_COUNT", "count count cannot be negative.");
    } else {
      count = count - 1;
      promise.resolve(count);

      // react-native側へ送るペイロード
      WritableMap params = Arguments.createMap();
      params.putInt("count", count);

      // react-native側にイベントを発火する
      this.getReactApplicationContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("onDecrement", params);
    }
  }
```

react-native 側では`NativeEventEmitter`の中に Native Module のインスタンスを設定して EventEmitter を取得します。
あとは、EventEmitter に EventListener を設定すれば OK です。

```js
// App.js
import { NativeModules, NativeEventEmitter } from "react-native";

const counterEventEmitter = new NativeEventEmitter(Counter);

counterEventEmitter.addListener("onDecrement", ({ count }) => {
  console.log(count); // => 1
});
```

> なにやら`DeviceEventEmitter`と`NativeAppEventEmitter`というものもあるらしい。

## まとめ

react-native で Android の Native module を呼び出す方法についてでした。
2 つのものが繋がって動作すると楽しいですね。


February, 2019

react-native-dropdownalertをreact-native-router-fluxと一緒に使う

react-native-elementsで動的にThemeを変更する

react-nativeでreact-styleguidistを使う

react-nativeでNative moduleを呼び出す(Swift編)

react-nativeでNative moduleを呼び出す(Android編)