expo-sqlite

import {openDatabase, SQLResultSet} from '@amazon-devices/expo-sqlite';
import React, {useEffect, useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

let db = openDatabase('database.db');

export const App = () => {
  const [rows, setRows] = useState<any[][]>([]);

  const [dbClosed, setDbClosed] = useState(false);

  // データベースを作成します
  useEffect(() => {
    db.transaction((tx) => {
      tx.executeSql(
        'create table if not exists items (id integer primary key not null, done int, value text, floating double, int integer);',
      );
    });
  }, []);

  const handleSelectResult = (result: SQLResultSet) => {
    if (result.rows.length > 0) {
      const columnNames = Object.keys(result.rows._array[0]);
      const allRows = result.rows._array.map(Object.values);
      setRows([columnNames, ...allRows]);
    } else {
      setRows([]);
    }
  };

  // データベースを開きます
  const openDb = () => {
    db = openDatabase('database.db');

    db.transaction((tx) => {
      tx.executeSql(
        'create table if not exists items (id integer primary key not null, done int, value text, floating double, int integer);',
      );
    });

    setDbClosed(false);
  };

  // データベースを同期的に閉じます
  const closeDbSync = () => {
    db.closeSync();
    setDbClosed(true);
  };

  // データベースを非同期で閉じます
  const closeDbAsync = async () => {
    await db.closeAsync();
    setDbClosed(true);
  };

  // 挿入操作を同期的に実行します
  const transactionSync = () => {
    db.transaction((tx) => {
      const done = Math.round(Math.random());
      const value = 'text-' + Date.now().toString().slice(-4);
      const float = Number((Math.random() * 10).toFixed(2));
      const int = Math.round(Math.random() * 1000);

      tx.executeSql(
        'insert into items (done, value, floating, int) values (?, ?, ?, ?)',
        [done, value, float, int],
        () => {},
      );
    });
  };

  // 削除操作を非同期で実行します
  const transactionAsync = async () => {
    await db.transactionAsync(async (tx) => {
      await tx.executeSqlAsync(
        'delete from items where id = (select max(id) from items)',
      );
    });
  };

  // 選択トランザクションを同期的に実行します
  const readTransactionSync = () => {
    db.readTransaction((tx) => {
      tx.executeSql('select * from items', [], (_, result) =>
        handleSelectResult(result),
      );
    });
  };

  // データベースを削除する
  const deleteDb = () => {
    db.deleteAsync();
  };

  return (
    <View style={styles.container}>
      <View style={styles.sideColumn}>
        <Button title="open" onPress={openDb} disabled={!dbClosed} />
        <Button title="close sync" onPress={closeDbSync} disabled={dbClosed} />
        <Button
          title="close async"
          onPress={closeDbAsync}
          disabled={dbClosed}
        />
        <Button
          title="transaction sync (insert)"
          onPress={transactionSync}
          disabled={dbClosed}
        />
        <Button
          title="transaction async (delete)"
          onPress={transactionAsync}
          disabled={dbClosed}
        />
        <Button
          title="同期的な読み取りトランザクション（選択）"
          onPress={readTransactionSync}
          disabled={dbClosed}
        />
        <Button
          title="データベースを削除"
          onPress={deleteDb}
          disabled={!dbClosed}
        />
      </View>
      <View style={styles.mainColumn}>
        <Text style={styles.label}>Database version: {db.version}</Text>
        <Text style={styles.label}>Database open: {String(!dbClosed)}</Text>
        <View style={styles.table}>
          {rows.map((row) => (
            <View style={styles.row}>
              {row.map((col) => (
                <View style={styles.cell}>
                  <Text style={styles.cellText}>{String(col)}</Text>
                </View>
              ))}
            </View>
          ))}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
  },
  container: {
    flex: 1,
    backgroundColor: 'white',
    flexDirection: 'row',
    padding: 20,
  },
  sideColumn: {
    flex: 1,
    flexDirection: 'column',
    padding: 10,
  },
  mainColumn: {
    flex: 2,
    flexDirection: 'column',
    padding: 10,
  },
  label: {
    color: 'black',
    fontSize: 32,
    flexDirection: 'column',
  },
  table: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  row: {
    flexDirection: 'row',
    height: 40,
  },
  cell: {
    flex: 1,
    borderColor: 'black',
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cellText: {
    color: 'black',
    fontSize: 20,
  },
});