[React Native]TypeError: undefined is not an object (evaluating 'db.transaction')

Question

前提・実現したいこと

react nativeのexpoでアプリ開発の勉強をしています。
SQLiteを使いたいのですが、以下のようなエラーが出て困っています。
記事を参考にしているのですが、自分の環境だとうまくいきません。
useEffectでは読み込めているのでdbには参照が入っているはずなのですが、
insert時にdbがundefinedになってしまいます。

原因がわかる方がいましたら、コメントお願いします。

####参考
https://garmi.blog/2020/09/15/react-native-expo-sqlite%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/

発生している問題・エラーメッセージ

TypeError: undefined is not an object (evaluating 'db.transaction')

該当のソースコード

import { StatusBar } from "expo-status-bar";
import React, { VFC, useState, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  Button,
} from "react-native";
import { StackNavigationProp } from "@react-navigation/stack";
import { RouteProp } from "@react-navigation/native";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import * as SQLite from 'expo-sqlite';
import * as FileSystem from "expo-file-system";

import { RootStackParamList } from "../../../types/navigation";
import { RightArrowIcon } from "../../Atoms/RightArrowIcon";
import { DropdownMenu } from "../../Molecules/DropdownMenu";
import { Separator } from "../../Atoms/Separator";

type Props = {
  navigation: StackNavigationProp<RootStackParamList, "Input">;
  route: RouteProp<RootStackParamList, "Input">;
};



export const InputScreen: VFC<Props> = ({ navigation, route }) => {
  //略
  const [items, setItems] = useState<SQLite.SQLResultSet>();
  let db: any;

  useEffect(() => {
    initializeDatabase();
  }, [])

  const initializeDatabase = () => {
    // DBの作成先
    console.log(FileSystem.documentDirectory + "SQLite/");

    // DBのオープン
    db = SQLite.openDatabase("DB.db");

    db.transaction((tx: any) => {
      tx.executeSql(
        "create table if not exists costHistory (id integer primary key autoincrement, cost integer not null, category string not null, memo string, date date not null);",
        null,
        () => { // 成功時のコールバック
          console.log("initialize success");
        },
        () => { // 失敗時のコールバック
          console.log("initialize fail");
          return true; //　ロールバックする場合はtrueを返す
        }
      );
    });
  }

  const errorDB = () => {
    console.log('DB open failed.');
  }


  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date: Date) => {
    setDate(date);
    hideDatePicker();
  };
  const onPress = (account_name: string) => {
    navigation.navigate("Account", { account_name });
  };
  const onClickStore = () => {
    db.transaction((tx: any) => {
      tx.executeSql(
        "insert into costHistory (cost, category, memo, date) values (?, ?, ?, ?);",
        [cost, category, memo, date],
        () => {
          console.log("insert success");
        }, // 成功時のコールバック関数
        () => {
          console.log("insert fail");

          return true; // ロールバックする場合はtrueを返す
        } // 失敗時のコールバック関数
      );
      tx.executeSql(
        "select * from costHistory;",
        [],
        (_, resultSet: any) => {
          setItems(resultSet);
          console.log("select success");
          for (let i = 0; i < resultSet.rows.length; i++) {
            const id = resultSet.rows.item(i).id;
            const name = resultSet.rows.item(i).name;
            console.log(resultSet?.rows);
            console.log(`${id}:${name}`);
          }
        },
        () => {
          console.log("select fail");
          return false;
        }
      )
    });
    };
  return (
    //　略
  );
};

const styles = StyleSheet.create({
  // 略
});

試したこと

app.jsonにsdkVersionの追加

{
  "expo": {
    "name": "app",
    "slug": "app",
    "sdkVersion": "41.0.0",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

補足情報（FW/ツールのバージョンなど）

"expo": "~41.0.1",
"expo-file-system": "~11.0.2",
"expo-sqlite": "~9.1.0",

Answer 1

以下をグローバルに定義することで解決しました。

const db = SQLite.openDatabase("DB.db");