React Native Expo SQLiteを使ってみる

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",
  },
});