Load a markdown file in Expo 40+ using typescript

Question

In Expo 40, I need to load markdown files from my local bundle. I'm also using typescript.

I found this post describing a solution, but the assetsExt App.json key doesn't seem to work anymore.

I've tried following the typescript tips to add a declaration and add it to my tsconfig, and that lets typescript find it but my when I load my react-native app, it still does not resolve the app:

Unable to resolve module ./../../../assets/SOME_MARDOWN.md from /app/xxxx/SOME_COMPONENT.tsx:
None of these files exist:
...

Answer 1

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

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 documented elsewhere:

1. Create a declaration (*.d.ts) file, specifying markdown as a valid extension: declare module "*.<SOME_COOL_FILE_EXTENSION>"
2. Make sure that file was in one of my tsconfig.json root directories (which are listed in the compilationOptions -> "include" key).
3. Add that file to typeRoot under compilationOptions in tsconfig.json
4. import/require the md in my component

For me these steps ended up being:

1. add a file in ./app/declaration.d.ts containing just: declare module "*.md"
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!