Our app is currently in the development stage with a database containing approximately 4000 recipes. To save space, we have chosen to store the recipes in one locale during initial download. However, users have the option to switch locales within the app's settings. When a user changes their locale, the app will then download the recipes in the new locale, which amounts to around 34Mb of data. Once downloaded, users can access the recipes in the new locale, but there is a noticeable delay of 45 seconds each time they access the recipe section.
The issue seems to be related to JSON.parse. We understand that parsing a 34Mb file may take some time, but we are looking for ways to optimize this process. Interestingly, accessing the recipes that are bundled with the app (in the initial locale) is quick and seamless, despite the file being similar in size.
Below is the code snippet responsible for reading and parsing the downloaded files:
const readDownloadedJson = async () => {
await ReactNativeBlobUtil.fs
.readFile(recipesPath, "utf8")
.then((res) => {
const parsedJson = JSON.parse(res);
console.log(parsedJson.length);
})
.catch((err) => {
console.log("status: ", err.status);
console.log("data: ", err.data);
console.log("message: ", err.message);
});
};
On the other hand, here is how the bundled recipes are accessed:
import Data from "../../Data/Recipes.json";
For reference, our app is built using react-native version 0.72.1 and react-native-blob-util version 0.18.6