React native - Expo SQLite - Unable to resolve module ../assets/terezeen.db

Question

I installed the expo SQLite package with the expo filesystem and assets package. I am trying to load a pre-configured database but I keep getting these errors:

Android Bundling failed 341ms
Unable to resolve module ../assets/terezeen.db from D:\Skola\Vysoka\bakala\frontend\App.js:

None of these files exist:
  * terezeen.db
  * ..\assets\terezeen.db\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  23 |   }
  24 |   await FileSystem.downloadAsync(
> 25 |     Asset.fromModule(require("../assets/terezeen.db")).uri,
     |                               ^
  26 |     FileSystem.documentDirectory + "SQLite/terezeen.db"
  27 |   );
  28 |   return SQLite.openDatabase("terezeen.db", "1.0");

App.js

import * as SQLite from 'expo-sqlite';
import * as FileSystem from 'expo-file-system';
import { Asset } from 'expo-asset';

async function openDb() {
  if (!(await FileSystem.getInfoAsync(FileSystem.documentDirectory + "SQLite")).exists) {
    await FileSystem.makeDirectoryAsync(FileSystem.documentDirectory + "SQLite");
  }
  await FileSystem.downloadAsync(
    Asset.fromModule(require("../assets/terezeen.db")).uri,
    FileSystem.documentDirectory + "SQLite/terezeen.db"
  );
  return SQLite.openDatabase("terezeen.db", "1.0");
}

export default function App() {
  const db = openDb();

metro.config.js

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve(
        "react-native-svg-transformer"
      ),
    },
    resolver: {
      assetExts: [
        assetExts.filter((ext) => ext !== "svg"),
        assetExts.push('db')
      ],
      sourceExts: [...sourceExts, "svg"],
    },
  };
})();

react-native.config.js

module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets:['./assets/fonts/'],
    dependencies: {
        "react-native-sqlite-storage": {
          platforms: {
            android: {
                sourceDir:
                    "../node_modules/react-native-sqlite-storage/platforms/android-native",
                    packageImportPath: "import io.liteglue.SQLitePluginPackage;",
                    packageInstance: "new SQLitePluginPackage()"
                }
            }
        }
    }
}

File tree:

|assets
|--fonts
|  |--font.otf <-- here is the method
|--terezeen.db
|
|src
|--assets <- just for case of the problem
   |--fonts
      |--font.otf
   |--terezeen.db
|
|App.js <- file that calls the sqlite

After the installation of those expo packages I am also disallowed to use custom font because now it won't find it.

Answer 1

I have edited the metro.config.js like this:

const { getDefaultConfig } = require('expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push('db');

module.exports = defaultConfig;

Also, I thought that the directory of the database should be linked with android, so instead of linking it in the root directory I was linking it with the android directory. Now the code looks like this:

async function openDb() {
  if (!(await FileSystem.getInfoAsync(FileSystem.documentDirectory + "SQLite")).exists) {
    await FileSystem.makeDirectoryAsync(FileSystem.documentDirectory + "SQLite");
  }
  await FileSystem.downloadAsync(
    Asset.fromModule(require("./src/assets/terezeen.db")).uri,
    FileSystem.documentDirectory + "SQLite/terezeen.db"
  );
  return SQLite.openDatabase("terezeen.db", "1.0");
}

export default function App() {
  const db = openDb();