【React Native】「react-native-sqlite-storage」ライブラリを使ってアプリにSQLiteを実装する

データ取得までになかなか苦戦したので、備忘録としてまとめ。
「react-native-sqlite-storage」ライブラリを使って、React Native のアプリに SQLite の機能を実装する方法についてです。
なお、今回の記事では Android での実装のみをまとめています。

GitHub のページはこちらから。

GitHub – andpor/react-native-sqlite-storage: Full featured SQLite3 Native Plugin for React Native (Android and iOS)
https://github.com/andpor/react-native-sqlite-storage

実装の際に参考にさせていただいた記事がこちら。

RN(Reacct Native)でsqliteを使う方法 – リアクトネイティブ(React Native)プロジェクトでsqliteデータベースを使う方法について説明します。
https://dev-yakuza.posstree.com/react-native/react-native-sqlite-storage/

こちらは主にデータベースを用意する時の手順について参考になりました。

まず、事前準備として、SQLite DB を作成します。
こちらに関しては、上記の参考サイトをご確認ください。
なお、作成の際は DB Browser for SQLite というアプリを使いました。
作成したデータベースは、android/app/src/main/assets/www に置いてください。

上記が完了したら、ライブラリをインストールします。
まず、下記のコマンドを実行してください。

npm install --save react-native-sqlite-storage
react-native link react-native-sqlite-storage

// iOS の場合は下記も実行
npx pod-install

上記が正常に終了すれば、インストール作業は完了です。

次に、コードを追加していきます。
サンプルコードは下記のとおりです。

import SQLite from 'react-native-sqlite-storage';
SQLite.enablePromise(true);

SQLite.openDatabase(
  {
    name: 'example.db',
    location: 'default',
    createFromLocation: '~www/example.db',
  },
  (db) => {
    db.transaction(tx => {
      tx.executeSql("SELECT * FROM sample", [])
        .then(([tx, { rows }]) => {
          console.log(rows.item(0));
        })
        .catch(error => {
          console.log("error:", error);
        });
    });
  },
  error => {
    console.log("error", error);
  }
);

上記を実行すると、sample テーブルから全データを取得し、その最初のデータログに表示しています。
実際にコードを書く際は、for 文などで取得したデータを回して state などに保存するようにしてください。
サンプルコードは以上です。

GitHub のサンプルコードでは、db.transaction() を実行すると undefined だと怒られてしまったのですが、Issues の下記の記事によると、どうやら書き方が間違っていたみたいです。

Possible Unhandled Promise Rejection · Issue #388 · andpor/react-native-sqlite-storage · GitHub
https://github.com/andpor/react-native-sqlite-storage/issues/388

私の環境では、上記のサンプルコードのように記述すると、SQL 文が実行できました。

ただし、上手くいったのは Select 文までで、現在は Insert 文が動作しなくて困っています…。
カラム名はあっているのに、そのカラムはテーブルに無いよ！と言われたり、型が違うよ！と怒られています。
もうしばらくは格闘することになりそうです…。

以上、React Native の「react-native-sqlite-storage」ライブラリを使ってアプリに SQLite を実装する方法についてでした。
ご参考になれば幸いです。