React native retrieve json from firebase STORAGE

Question

I have a problem regarding firebase storage. I have stored there several .JSON files, my storage looks like this right now:

My goal is to retrieve this .JSON files and use the data inside those files in my react-native app. The thing is, all tutorials online only show how to retrieve pictures from the storage, like this:

const downloadImage = async (imageName) => {
        const imageRef = firebase.storage().ref(`images/${imageName}`);
        const url = await imageRef.getDownloadURL();
        setPickedImage(url);
    };

In this case we retrieve a downloadURL from firebase but in my case we dont have a picture. What I want to accomplish is to be able to look inside the file I download, I want to reuse the data inside those 2 .JSON files and I dont know how to accomplish that and thats where I need your help, thank you for reading!

PS: I know it would be much more easier to just use firebase database for .JSON files but I want explicitly use firebase storage in this case, thats really important to me.

Answer 1

After you have the json file's url you need to use react-native-fs or rn-fetch-blob to download and read the file.

Example, using rn-fetch-blob

import RNFetchBlob from 'rn-fetch-blob';

const downloadUrl = 'xyz'; // url you got from Firebase Storage
const dirs = RNFetchBlob.fs.dirs;
const pathToSavedFile = dirs.DocumentDir + '/path-to-file.json';

// Download the file
RNFetchBlob.config({
  // response data will be saved to this path if it has access right.
  path: pathToSavedFile,
})
  .fetch('GET', downloadUrl, {
    //some headers ..
  })
  .then((res) => {
    // the path should be dirs.DocumentDir + 'path-to-file.anything'
    console.log('The file saved to ', res.path());

    // Read the file
    RNFetchBlob.fs.readFile(pathToSavedFile, 'utf8').then((data) => {
      // data should be JSON string, you should be able to JSON.parse it
      console.log(data);
    });
  });

Simple example, not tested but should work, you can improve it according to your need, like remove nesting and use async await.

On Android you will also have to request permissions to write file:

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

const requestFileWritePermission = async () => {
  if (Platform.OS === 'ios') return true;
  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
  );
  return granted === PermissionsAndroid.RESULTS.GRANTED;
};

Refer to the docs, linked above, for detailed instructions on how to use the library.