Downloading data files with React Native for offline use

Question

I am wanting to develop an app where a user can select different gamepacks to install on their android or ios device. A gamepack will consist of:

• one or more JSON files
• images
• sounds

Right now I'm not really concerned if these are transferred individually or in a zip file (though a zip file would certainly be preferred). Of course the device will need to be connected to the Internet to get the current list of gamepacks and to download the ones that the user chooses. Once the gamepacks are downloaded to the phone the user will not need an Internet connection to play the game as they will have all the files.

How do I go about implementing this in my project?

How do I download the files? Would I use the react-native-fetch-blob library and save it in a specific location? This library refers to saving it as "cache" rather than permanently, so I am not sure if this is the correct solution. The specific section I am looking at on the library page is "Use Specific File Path". But because it is cache, should I be looking for something else that is more of a longer term storage? It does say on the page that files will not be deleted so I am a bit confused as to what the difference between permanent storage and cache is in this case.

Once the files are downloaded would I then be able to open images and display them, open sound files and play them, and open the json files and process them?

Answer 1

Check out React Native FS, specifically the documentation on downloadFile:

https://github.com/johanneslumpe/react-native-fs#downloadfileoptions-downloadfileoptions--jobid-number-promise-promisedownloadresult-

Here's a working example:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  Image,
} from 'react-native';
import RNFS from 'react-native-fs';


export default class downloadFile extends Component {
  constructor() {
    super()
    this.state = {
      isDone: false,
    };
    this.onDownloadImagePress = this.onDownloadImagePress.bind(this);
  }

  onDownloadImagePress() {

      RNFS.downloadFile({
        fromUrl: 'https://facebook.github.io/react-native/img/header_logo.png',
        toFile: `${RNFS.DocumentDirectoryPath}/react-native.png`,
      }).promise.then((r) => {
        this.setState({ isDone: true })
      });
  }

  render() {
    const preview = this.state.isDone ? (<View>
      <Image style={{
        width: 100,
        height: 100,
        backgroundColor: 'black',
      }}
        source={{
          uri: `file://${RNFS.DocumentDirectoryPath}/react-native.png`,
          scale: 1
        }}
      />
      <Text>{`file://${RNFS.DocumentDirectoryPath}/react-native.png`}</Text>
    </View>
    ) : null;
    return (
      <View>
        <Text onPress={this.onDownloadImagePress}>Download Image</Text>
        {preview}
      </View>
    );
  }
}
AppRegistry.registerComponent('downloadFile', () => downloadFile);

It's important to know that the height and width must be set on the Image