How to save imported JSON file with Expo Filesystem

Question

I have been working on a React Native project with Expo that uses a json file to store local data. I am importing the data like so import data from '../database.json'

I am making changes (adding and removing) to the imported JSON by using data.push(new_data). These changes are not persistent when I close the app because I cannot figure out how to save them. I have looked at using the expo-file-system library as so:

import * as FileSystem from 'expo-file-system';
...
FileSystem.writeAsStringAsync(FileSystem.documentDirectory + 'database.json', data);

This is from looking at examples in the API documentations. This however always throws promise rejections and doesn't end up writing the file. Can you point me in the right direction?

Also, should I import the database.json in a different way so I will already have the uri to save it to?

Answer 1

Use AsyncStorage instead. The react native package is deprecated but working, or use @react-native-community/async-storage and convert json to string (AsyncStorage can only store strings)

Set item

import AsyncStorage from '@react-native-community/async-storage';
...
await AsyncStorage.setItem('myData', JSON.stringify(data))

Get item

const data = await AsyncStorage.getItem('myData')

Answer 2

The documentation doesn't give an example of it's returned props in promises, so I was overlooking it for longer than I care to admit ?. I was really dedicated to figuring this out so I could use the Expo solution, and totally missed the return Promise for createFileAsync, so hopefully this saves someone a significant amount of time in the future.

import * as FileSystem from 'expo-file-system';
const { StorageAccessFramework } = FileSystem;

const saveFile = async () => {
  const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();
  // Check if permission granted
  if (permissions.granted) {
    // Get the directory uri that was approved
    let directoryUri = permissions.directoryUri;
    let data = "Hello World";
    // Create file and pass it's SAF URI
    await StorageAccessFramework.createFileAsync(directoryUri, "filename", "application/json").then(async(fileUri) => {
      // Save data to newly created file
      await FileSystem.writeAsStringAsync(fileUri, data, { encoding: FileSystem.EncodingType.UTF8 });
    })
    .catch((e) => {
      console.log(e);
    });
  } else {
    alert("You must allow permission to save.")
  }
}

Answer 3

If you using AsyncStorage, it only store for small data. Maybe 6mb or 10 mb.

You can use expo fileSystem

import * as FileSystem from 'expo-file-system';
...
FileSystem.writeAsStringAsync(FileSystem.documentDirectory + 'database.json', data);

Convert your data (Type json to string) Such as this:

  writeData = async () => {
          var persons = ''
          await axios.get(`http://192.168.0.48:4000/api/sql/student`)
          .then(res => {
            persons = res.data
          })
          await FileSystem.writeAsStringAsync(FileSystem.documentDirectory + `offline_queue_stored.json`, JSON.stringify(persons));
        }