export json object to local storage in react native?

Question

I am fetching a JSON object form Firestore that I want to be able to export as a JSON file into my local storage. How can I do that?

Here is an example of my data:

[
   {
      "date":1602214199274,
      "expenseType":{
         "id":"74aa77c2-d3c7-4456-9b5c-71cbefc5cc66",
         "name":"Raw materials",
         "userId":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx5"
      },
      "id":"ae1d7a8d-2492-46dd-8c69-97ef206e6fab",
      "key":"fd6ec236-6705-4a95-a698-13e2f25f08d2",
      "note":"Fugit quaerat et veritatis doloremque.",
      "supplier":{
         "id":"d55a8495-ec27-42b4-894b-a2a9fa0eb3a4",
         "name":"Yvonne Stokes",
         "phone":"1-!##-!##-####",
         "userId":"xxxxxxxxxxxxxxxxxxxxxxxxxxx"
      },
      "totalPrice":{
         "amount":"952.00",
         "currency":"USD"
      },
      "type":"EXPENSE"
   },
   {
      "date":1601695799282,
      "expenseType":{
         "id":"39c5eb85-0377-41fc-a549-ce590146ac26",
         "name":"Equipment",
         "userId":"xxxxxxxxxxxxxxxxxxxxxxx"
      },
      "id":"cee9d1c8-979c-496f-a56d-95e3f8474823",
      "key":"8c6cd4a2-f940-44be-bbf8-c0cab7631e37",
      "note":"Amet provident itaque neque mollitia.",
      "supplier":{
         "id":"36b51b24-7d07-410b-849c-4c92cb52c41e",
         "name":"Jack Macejkovic",
         "phone":"(!##) !##-####",
         "userId":"xxxxxxxxxxxxxxxxxe"
      },
      "totalPrice":{
         "amount":"378.00",
         "currency":"KHR"
      },
      "type":"EXPENSE"
   },]

Emilio · Accepted Answer · 2020-10-09 04:20:41Z

3

You can convert it to a string using: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

install async-storage:

npm i @react-native-community/async-storage

Usage:

import AsyncStorage from '@react-native-community/async-storage';

const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value)
    await AsyncStorage.setItem('@storage_Key', jsonValue)
  } catch (e) {
    // saving error
  }
}

Checkout the docs here: https://react-native-community.github.io/async-storage/docs/usage

You can then parse when you retrieve it from local storage: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

edited Oct 9, 2020 at 4:20

answered Oct 9, 2020 at 4:14

Emilio

3891 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sokvebol kol Over a year ago

There could be download as file.json?

Emilio Over a year ago

Whats the reason you want to save it as a json file instead of a string?

Haseeb A · Accepted Answer · 2020-10-09 05:49:45Z

React native async storage (https://react-native-community.github.io/async-storage/) is a string only store. So, You will have to convert it to string using JSON.stringify(json) and then store it in async storage. It is not equivalent to browser's storage.

If you are using android the AsyncStorage size is limited to few MBs (6MB by default). Which can be increased if needed.

If data is too big but it has a format then you can use sql based db https://github.com/andpor/react-native-sqlite-storage (expo version: https://docs.expo.io/versions/latest/sdk/sqlite/)

Otherwise you have realm https://realm.io/products/realm-database https://github.com/realm/realm-js

Collectives™ on Stack Overflow

export json object to local storage in react native?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related