Loading non-media assets (markdown)

Expo SDK
1

Hey there, I’m building an application that’s meant to be an offline reader for a website powered by markdown. In order to work offline, I want to bundle the markdown with the application, but be able to fetch and store new markdown as new posts are made / old posts are updated. Right now I’m struggling with how to bundle / request / save the markdown using Expo.

I initially tried using Expo.Asset, but require doesn’t seem to like markdown files, and Expo.Asset seems to only work with require.

Next I tried react-native-fetch-blob, but soon found out that doesn’t work without detaching.

Does anyone have any suggestion for the workflow of:

  1. Check if file is stored locally (From initial app or stored network file)
  2. Request file over network if not
  3. Store network file, so that case 1 triggers in the future

I’m really hoping there’s an answer here that ISN’T detach from / ditch Expo.

1 Like
2

I’m also trying to use local Markdown assets and prioritize first-load-offline support.

This seems to work on both iOS and Android devices in Expo client

import { FileSystem, Asset } from 'expo'

// ...

const getMarkdown = markdownId => {
  const markdownAsset = await Asset.fromModule(require(`./assets/markdown/${markdownId}.md`))
  const markdown = await FileSystem.readAsStringAsync(markdownAsset.localUri)
  return markdown
}

getMarkdown(`filename`)

app.json excerpt

"packagerOpts": {
  "assetExts": [
    "md"
  ]
},
"assetBundlePatterns": [
  "assets/**/*"
]

Here’s a related snack I was working on.

Hope that helps, and would love to know if you have found some other approach.

1 Like
3

@jiku Does this still (SDK 30.0) work?

I’m having a lot of trouble getting it to work.

Would like to update the files via OTA and read the markdown (as a string) so I can use it with react-native-markdown-renderer

https://github.com/mientjan/react-native-markdown-renderer/wiki/Examples

4

@wbobeirne (and @jiku) do you have a working solution for it?

5

Hi. Did you manage to get this working? I’m new to Expo (and RN in general) and came across your post. I’m looking for a way to manage blog posts in my Expo app. Ideally, I’d have them as Markdown in the app and would push new ones every x days. Is it possible to have these stored in the app (in .md files) and have a screen read them all and present them while also allowing me to add more .md files remotely via publishing (as opposed to going through the App Store)?

6

I found my answer here: reactjs - react native (expo) load markdown files - Stack Overflow

You need to do:

fetch(require("../pages/get_started.md"))
      .then((t) => t.text())
      .then(console.log);

to see the raw content.