Sunday, 2 June 2019

How to bundle a static YAML file with a React Native app?

I'd like to ship my React Native app together with some static assets, like images, audio files, and one YAML file.

The images can be automatically bundled as described here:

<Image source={require('./my-icon.png')} />

Now I'm trying to do the same with the YAML file. This seems to work:

let yamlContent = require('../data/content.yaml');

However, when running this in the Android simulator, I get an error:

error: bundling failed: Error: Unable to resolve module `../content.yaml` from 
`C:\Users\....\path\to\loader.ts`: 
The module `../content.yaml` could not be found from 
`C:\Users\....\path\to\loader.ts`. Indeed, none of these files exist:
  * `C:\Users\....\path\to\data\content.yaml(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `C:\Users\....\path\to\content.yaml\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`

I double-checked the path in the output, the file really exists.

How can I read static YAML files in React Native?

I also tried the same code outside of React Native, in a Node.js console app. In this situation, the file seems to be read (if the YAML is malformed, I get an error). However, the object yamlContent is always an empty Javascript object.



from How to bundle a static YAML file with a React Native app?

No comments:

Post a Comment