React NativeでHooksを使いRealmを使用する方法

はじめに

React Native で Realm を使用しようとしたのですが、公式サイトに記載されている記述方法が古かったので、Hooks で Realm を使用する方法をご紹介します。

なお、React Native のバージョンは v0.60 以上で、言語は TypeScript を使用します。

プロジェクトの作成

React Native で TypeScript を使用するためには、以下のコマンドでプロジェクトを作成します。

$ npx react-native init MyApp --template react-native-template-typescript

Realm のインストール

Realm は下記コマンドでインストールします。2行目はCocoapodsの設定です。

$ npm install --save realm
$ cd ios && pod install && cd ..

App.tsx の編集

App.tsx を以下のように編集します。

Hooks を使用して公式サイトの内容を書き換えています。

import React, { useEffect, useState } from 'react';
import { SafeAreaView, Text } from 'react-native';
import Realm from 'realm';

const App = () => {
  const [realm, setRealm] = useState<Realm>();

  useEffect(() => {
    Realm.open({
      schema: [{ name: 'Dog', properties: { name: 'string' } }],
    }).then((realm2: Realm) => {
      realm2.write(() => {
        realm2.create('Dog', { name: 'Rex' });
      });
      setRealm(realm2);
    });

    // 【終了処理】処理が終了したらデータベースを閉じる
    const cleanup = () => {
      if (realm !== undefined && !realm.isClosed) {
        realm.close();
      }
    };

    // return する関数が終了処理(componentWillUnmountに相当)
    return cleanup;
  }, []);

  const info = realm
    ? 'Number of dogs in this Realm: ' + realm.objects('Dog').length
    : 'Loading...';

  return (
    <>
      <SafeAreaView>
        <Text>{info}</Text>
        <Text>---</Text>
        <Text>{realm?.path}</Text>
      </SafeAreaView>
    </>
  );
};

export default App;

<Text>{realm?.path}</Text>で Realm データベースのパスを出力しています。これは、Realm のデータベースは保存される場所が深く見つけられないためです。パスが分かったら、Realm Browser (無料) などを使用してデータベースの中身を確認できます。

なお、iOS では Realm のデータベースが Finder から見えない場所に保存されるので、Finder の 移動 >> フォルダに移動 から出力されたパスに移動します。

iOS のシミュレータで実行

iOS のシミュレータで実行するには、以下のコマンドを実行します。

$ npx react-native run-ios

しばらく待つと、以下のような画面が表示されます。

Android のエミュレータで実行

Android のエミュレータで実行するには、以下のコマンドを実行します。

$ npx react-native run-android

しばらく待つと、以下のような画面が表示されます。

おわりに

駆け足でしたが、React Native で Hooks を使って Realm を使用する方法は分かると思います。

実際はかなり苦戦しましたが、お役に立てば幸いです。

参考サイト

realm.io