Search code examples
react-nativereduxrealmoffline

Local storage solutions for large data including images on React Native

Here's the flow of how my end-product should work:

  1. When the user opens the app for the first time, fetch all the data i.e., including images(150+) and relevant JSON objects.
  2. On opening the app subsequently, the images and data should load from local storage i.e., no need for internet at all.

I know it seems weird but this is my use case:

The product is a Wayfinder running on Android Box(55-inch touchscreen TV ) which will be placed in the shopping mall. It will not have access to the internet unless I manually connect it.

Hence it should load the data when opening for the first time i.e. when I'm configuring the application.

Solutions I have come across:

Realm: Local database management with excellent support for react-native - my option right now

Native Async Storage: Not suitable for large data

SQLite: Not comfortable with SQL queries

I'm still looking for options on how differently this problem can be tackled. Also, I'm familiar with Redux.

Thanks.

Solution

  • Check out react-native-fs (or expo-file-system if working with expo).

    It is specially designed to store files on the device. In your component, it would look something like this:

    const RNFS = require('react-native-fs');

RNFS
    .downloadFile({ fromUrl: myURL, toFile: myFilePath })
    .promise
    .then(res => console.log('Done'));