how to write to a json file in react

Question

I have a json file that I will like to add data into it.

The json file contain:

[{"name":"Flossi","image":"https://robohash.org/istevelitut.png?size=50x50&set=set1","price":49,"info":"Cras dui."},
{"name":"Rab","image":"https://robohash.org/voluptatumsuntiste.png?size=50x50&set=set1","price":64,"info":"Phasellus insi."}]

I tried to use fs but I understand it cannot be done with react. Tried to install this package to npm: https://www.npmjs.com/package/write-json-file

But get an error on the compiling.. Help?

Answer 1

NodeJS using the built in module fs to read and write and React-Native doesnt have one. I would recommend trying to use react-native-fs, although there are some Android limitations. After following the installation setup, you have to ask yourself where you want to save the JSON. If its in the app internal storage, there's no problem, but if you want to save to external storage there's additional setup that may ultimately just not work (I've experienced this).

import RNFS from 'react-native-fs';
import { Alert, Platform, PermissionsAndroid,} from 'react-native';

const saveFile= (saveLocation,data,encoding='utf8')=> {
  let dataString = JSON.stringify(data,null,2)
  RNFS.writeFile(saveLocation,dataString,encoding)
    .then(()=>Alert.alert('Saved the data!')
    .catch((err)=>Alert.alert("Failed to save data!",err.message)  
}

// you may or may not need this
const getFilePermissionsAndroid = async ()=>{
  const permissions = [
    PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
    PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
  ]
  // map permissions to whether or not they are granted
  let checkPermissions = await Promise.all(permissions.map(permission=>
    PermissionsAndroid.check(permission)
  ))
  // filter for ungranted permissions
  let permissionsToRequest = permissions.filter((permission,i)=>!checkPermissions[i])
  // if all are granted theres nothing to do
  if (permissionsToRequest.length == 0)
    return true
  // request the ungranted permissions
  let requestResult = await PermissionsAndroid.requestMultiple(permissionsToRequest);
  // I think requestResult is an array of Booleans but im not sure
  return Array.isArray(requestResult) ?
    // if array return true only if all permissions are granted
    requestResult.every(permission=>Boolean(permission)) :
    requestResult
}

const data = [
  {
    name: "Flossi",
    image: "https://robohash.org/istevelitut.png?size=50x50&set=set1",
    price: 49,
    info: "Cras dui."
  },
  {
    name: "Rab",
    image: "https://robohash.org/voluptatumsuntiste.png?size=50x50&set=set1",
    price: 64,
    info: "Phasellus insi."
  }
];

 
// add some stuff
data.push({
  name:"blah blah",
  image:"https://i.kym-cdn.com/entries/icons/mobile/000/003/406/trap-card-2.jpg",
  price:Math.floor(Math.random()*69),
  info:"Blah blah info"
});

// save to file
if(Platform.OS == 'android'){
  if(!await getFilePermissionsAndroid())
    Alert.alert('Writing to external storage may fail without these permissions','Writes to internal storage should be fine tho');
}
// check out documentation for more paths
let path = RNFS.DocumentDirectoryPath + 'data.json';
saveFile(path,data);