React Native + Expoに使用するSQLiteをGUIで確認する方法

はじめに

React Native + Expoにて使用するSQLiteをGUIで操作する方法を確認するのに、少し苦労したので、忘備録として共有しておきます。

この記事ではExpoにてSQLiteを使用する方法などは紹介していません。
Expo公式に書かれているので参照してください。

結論

公式のこちらに書かれていました。

手順を簡単に紹介していきます。

1. Drizzle Studio for Expo SQLiteをインストール

npm i expo-drizzle-studio-plugin

2. Drizzle Studio プラグインをセットアップ

// 必要なものをインポート
import { useDrizzleStudio } from "expo-drizzle-studio-plugin";
import * as SQLite from "expo-sqlite";
import { View } from "react-native";

// 使用したいDBを取得
const db = SQLite.openDatabaseSync("使用するDBの名前");

export default function App() {
    // Drizzle Studio プラグインをセットアップ
    useDrizzleStudio(db);

    return <View></View>;
}

3. ターミナルにて操作

expoを起動する。

yarn web

起動したターミナルにて、Shift + mを入力すると、以下のようなものが現れる。

Open expo-drizzle-studio-plugin を選択してクリック。
新しくタブが開かれるので待機すると、そのタブでSQLiteをGUI操作できます。

終わりに

React Native + Expo環境でDBを確認するのに悩んでたんですけど、知ってしまえばとても簡単にできました。取り敢えず公式をしっかり確認することが大切ですね。

参考になると嬉しいです。