expo: Cannot find find FileSystem properties and Asset while trying to import an existing database

Question

I am new to react native. I was trying to use expo-sqlite and following their guide under "Importing an existing database".

I have did 'expo install expo-file-system expo-asset` I have create a metro.config.js with the code from the guide

but when I copied the function:

async function openDatabase(pathToDatabaseFile: string): Promise<SQLite.WebSQLDatabase> {
  if (!(await FileSystem.getInfoAsync(FileSystem.documentDirectory + 'SQLite')).exists) {
    await FileSystem.makeDirectoryAsync(FileSystem.documentDirectory + 'SQLite');
  }
  await FileSystem.downloadAsync(
    Asset.fromModule(require(pathToDatabaseFile)).uri,
    FileSystem.documentDirectory + 'SQLite/myDatabaseName.db'
  );
  return SQLite.openDatabase('myDatabaseName.db');
}

VSC showed errors around FileSystem and Asset. Saying not able to find all of FileSystem properties and Asset

Property 'getInfoAsync' does not exist on type '{ new (): FileSystem; prototype: FileSystem; }'.

Cannot find name 'Asset'.

I am using Typescript.

package.json

{
  "name": "gymtracker",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"
  },
  "dependencies": {
    "@expo/ngrok": "^4.1.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/drawer": "^6.4.2",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@react-navigation/stack": "^6.2.1",
    "expo": "~45.0.0",
    "expo-asset": "~8.5.0",
    "expo-file-system": "~14.0.0",
    "expo-sqlite": "~10.2.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-reanimated": "^2.8.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.13.1",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.13",
    "typescript": "~4.3.5"
  },
  "resolutions": {
    "@types/react": "17.0.2",
    "@types/react-dom": "17.0.2"
  },
  "private": true
}

Update

I have used these two lines:

import * as Asset from 'expo-asset';
import * as FileSystem from 'expo-file-system';

The FileSystem error disappeared. However:

Property 'fromModule' does not exist on type 'typeof import("/home/ryan/Documents/GymTracker/node_modules/expo-asset/build/index")'.ts(2339)

Answer 1

You will have to import expo-asset like the expo docs show

import { Asset } from 'expo-asset';

If you want to keep expo-asset imported like this:

import * as Asset from 'expo-asset';

you will have to change your code to

...
Asset.Asset.fromModule(require(pathToDatabaseFile)).uri,
...