JSON file does not bundle with app (I think) and app crashes on first load

[caminoninja]

I have a JSON file with some info and I’m using it in the app. But on first run of the app it doesn’t load and the app fails. Not in development environment or hosted Expo app. Only on Google Play Store app. Haven’t tested on Apple yet.

I have tried Import, and Require in App.js too to preload but doesn’t really work.

Anyone tried the same before?

[wodin]

Hi

Can you please post some code showing how you’re doing this?

I haven’t tried this myself, but I think this is the way it’s supposed to be done:

https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets/

The example shows how to cache images, but I think it should work the same for JSON files.

[wodin]

By the way, @adamjnav has just posted about how to Lazy Load JSON files. There are similarities to what you’re trying to do, so I though the example might be helpful:

How to Lazy Load JSON

If you’ve ever wondered how to lazy load JSON (useful if you have large JSON files), here’s a quick guide on how to do so: Give your JSON file a custom extension (we’ll use the extension .lazy then create metro.config.js and add your custom extension to the assetExts: const { getDefaultConfig } = require("metro-config"); module.exports = (async () => { const { resolver: { sourceExts, assetExts } } = await getDefaultConfig(); return { resolver: { assetExts: [...assetExts…

[caminoninja]

Hi @wodin,

Thanks for replying again!

I started by just using this on my HomeScreen.js:

export default class HomeScreen extends React.Component {
   constructor(props) {
   	super(props);
   	this.state = {
   		myData: require('../assets/data/myData.json'),
   {
{

…but after putting it into production and finding out it wouldn’t get into the Assets and be bundled with the app and working on first run I was playing arround with it and found another approach:

import myData from '../assets/data/myData.json';

export default class HomeScreen extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			myData: myData,
	{
{

…none of them gets the file preloaded though. And though it crashes.

Best …,
Andy

[caminoninja]

Tried and still do not work. But might be very useful in another context.

[wodin]

Another idea. Not sure if it’s a stupid one It makes me a bit uncomfortable. I have not tried this.

How about treating your JSON as JavaScript source code and importing it?

So instead of just the JSON in a file called blob1.json you might have the following in blob1.js:

const blob = {"your":["json"]};
export default blob;

Then in the code you would do:

import * as blob1 from './assets/json/blob1';