Loading asset with custom extension not working

Question

I'm trying to implement my first application in react-native and I need to open database from a static file saved in my project folder.

I read that i need to allow loading custom extensions files from assets so i added following fragment into my app.json file:

"packagerOpts": {
    "assetExts": ["sqlite", "db"]
},

Next I'm trying to import this static file with .sqlite or .db extension inside my App.js component in componentDidMount() method:

componentDidMount = async () => {
  await Expo.FileSystem.downloadAsync(
    Expo.Asset.fromModule(require("./assets/db/local.db")).uri,
    `${Expo.FileSystem.documentDirectory}SQLite/local.db`
  );

  SQLite.openDatabase("local.db");
};

but expo builder keep saying Unable to resolve "./assets/db/local.db" from "App.js". Any suggestion please?

Answer 1

The following code is from 2 answers above

create metro.config.js in project root directory:

const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;

module.exports = {
  resolver: {
    assetExts: [
      ...defaultAssetExts,
      // 3D Model formats
      "dae",
      "obj",
      "mtl",
      // sqlite format
      "db",
      "sqlite"
    ]
  }
};

Optionally install metro-dependency: npm i metro-config --save-dev

Answer 2

I found that expo has some kind of bug but there is PR raised/approved for this one. For anyone who can't wait for official bug fix there is also workaround for this one:

Create a metro.config.js file with assetExts fixed the problem for me:

module.exports = {
  resolver: {
    assetExts: ["db", "mp3", "ttf"]
  }
}

and import this file lets say in your App.js? I'm now able to open SQLite database from file.

Answer 3

Go to node_modules metro-config defaults.js ad extend type to the assetExts section Done~

Answer 4

In Expo 40 - here was how I was able to get it running! Expo website source.

Note you'll have to put the files in the assets directory, and make sure your app.json specifies all of the needed extensions, mine includes everything: "assetBundlePatterns": ["**/*"],

First, I'll split it into two parts - getting Expo to work, then getting typescript to work.

Expo was simple, but only once I realized it was the issue. I followed the above guide. In summary:

1. expo install @expo/metro-config
2. create a metro.config.js and call the push method with whatever extension you are trying to add, in my case it was md (markdown):

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

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = defaultConfig;

3. Reset cache on expo (shift + r in the terminal window running it, on Mac)

Typescript (4) was more documented but I did:

1. Create a declaration (*.d.ts) file, specifying markdown as a valid extension.
2. Made sure that file was in one of my tsconfig.json, "include" directories
3. Add that file to typeRoot under compilationOptions in tsconfig.json
4. import/require the md in my component

For me these steps were:

1. add file ./app/declaration.d.ts
2. My "include" had the app directory in it, and looked like this: "include": ["App.js", "app", "test", "storybook"]
3. I added this to compilationOptions: "typeRoots":["./app/declaration.d.ts"],
4. import newborn from './../../../assets/resources/MY_MD_DOC.md'

Tada!