以下の内容は参考資料を実行してみた内容です。
あらかじめexpo-sqlite、expo-file-systemをインストールする。
全体ソース
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import * as FileSystem from "expo-file-system";
import * as SQLite from "expo-sqlite";
export default function App() {
const pressButton = () => {
console.log("Press!!");
};
const [items, setItems] = useState<SQLite.SQLResultSet>();
const initializeDatabase = () => {
// DBの作成先を出力
console.log(FileSystem.documentDirectory + "SQLite/");
// DBのオープン
const db = SQLite.openDatabase("DB.db");
db.transaction(
(tx) => {
tx.executeSql(
"create table if not exists players (id integer primary key not null, name text);", // 実行したいSQL文
null,
() => {
console.log("success");
}, // 成功時のコールバック関数
() => {
console.log("fail");
return true; // ロールバックする場合はtrueを返す
} // 失敗時のコールバック関数
);
tx.executeSql(
"insert into players (id, name) values (?, ?),(?, ?);",
[1, "yamada", 2, "sato"],
() => {
console.log("success");
}, // 成功時のコールバック関数
() => {
console.log("fail");
return true; // ロールバックする場合はtrueを返す
} // 失敗時のコールバック関数
);
tx.executeSql(
"select * from players;",
[],
(_, resultSet) => {
// SUCCESS
setItems(resultSet);
},
() => {
console.log("fail");
return false; // 何もしない
} // 失敗時のコールバック関数
);
},
() => {
console.log("fail all");
}, // 失敗時のコールバック関数
() => {
console.log("success");
} // 成功時のコールバック関数
);
};
const showData = () => {
for (let i = 0; i < items.rows.length; i++) {
const id = items.rows.item(i).id;
const name = items.rows.item(i).name;
console.log(items?.rows);
console.log(`${id}:${name}`);
}
};
const deleteData = () => {
const db = SQLite.openDatabase("DB.db");
db.transaction(
(tx) => {
tx.executeSql(
"delete from players;",
null,
() => {
console.log("success");
}, // 成功時のコールバック関数
() => {
console.log("fail");
return true; // ロールバックする場合はtrueを返す
} // 失敗時のコールバック関数
);
},
() => {
console.log("fail");
}, // 失敗時のコールバック関数
() => {
console.log("success");
} // 成功時のコールバック関数
);
};
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<Button title="BUTTON" onPress={() => pressButton()}></Button>
<Button title="initializeDatabase" onPress={() => initializeDatabase()}>
<Text>Initialize database</Text>
</Button>
<Button title="showData" onPress={() => showData()}>
<Text>Show data</Text>
</Button>
<Button title="deleteData" onPress={() => deleteData()}>
<Text>Delete data</Text>
</Button>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
データベースの中身を見る
SQLiteのDBを見るツールをダウンロードする
次にダウンロードしたツールでDBがある場所のpathを設定する。
先ほどのソースコードにあるinitializeDatabaseを実行した際に出力されるログを確認すると、以下のようなログが出力される。
file:///Users/user名/Library/Developer/CoreSimulator/Devices/○○/SQLite/DB.db
DBのファイルパス指定はfile:// の後を設定する。
データベースの中身はこんな感じで見れます。

参考資料
https://sankame.github.io/blog/2020-07-23-expo_sqlite_db_browsing/