How to backup data in React Native

Photo by Taylor Vick on Unsplash

Nowadays it’s hard to think of any app that doesn’t save some sort of data. This has a couple of advantages over retrieving data from the internet:

• Reading local data is much faster than over the network
• It works without having an internet connection
• Better privacy for your users since the data is kept on their phones

So if you are developing an app, it is very likely that you have already persisted some data locally. However, did you make sure to backup that data?

Why spend effort to implement data backups

If you are using React Native, you have probably already heard of AsyncStorage. Persisting data with AsyncStorage is super easy.
These are the two main methods of AsyncStorage:

• AsyncStorage.setItem(key, data)
• AsyncStorage.getItem(key)

That’s all you need to get started!

As of 2020 the average user buys a new phone every two to three years. That means the user will hopefully re-install your app after switching phones but he will have lost all the app data if you haven’t implemented a proper backup system.

Depending on the data you are saving, this can be just a minor inconvenience or a big loss of important data. Three things can happen now:

1. The user REALLY likes your app and forgives you
2. The user takes this chance to check out one of your competitors
3. The user is super mad, leaves your an angry 1-star review, publishes a tweet ranting about your app and installs the one from competitor

How to implement backups in React Native

Unfortunately, React Native still lacks documentation on the mentioned part. This was the main motivation for me to share some information in this article.

You have two main options:

1. Use some of the services iOS and Android already offers which are super easy to use and provide for a great user experience
2. Implement your own logic to backup and restore data

I will only go into detail on the first option, since this was the one which fitted me best. The app I developed does not require any kind of registration, so I would have had to build all this infrastructure just for backups. Also the UX has turned out to be better because the backups just run automatically and do not require any effort from the user.

If you want to go the second way (e.g. you do not want to trust Google and Apple with your backups), then you will anyway need to build some custom system for your current case.

Let’s break it down into our two platforms: iOS and Android

iOS Backups with iCloud

Good news: If you use AsyncStorage then iOS will actually backup this data out-of-the-box!

Still it’s always good to verify that everything works, right?

Unfortunately you cannot test iCloud backups in the simulator, so you will need an actual physical device to check. To test the automatic iCloud backups you can use the Offload app function of iOS.

If you have never heard of that function, don’t worry, me neither. Basically, you can uninstall an app on iOS while still keeping the app icon on your home screen. iOS will remove the app and backup the data, so when you tap the app icon again, it will automatically install the app one more time and restore all the data from your iCloud backup.

For more information on iCloud backups I recommend checking out this page.

Android Backups with Google Drive

This will not work without a tiny change in the AndroidManifest.xml , because per default the automatic backups are deactivated. You can activate the automatic backup by adding android:allowBackup="true" to your <application>!

<application
  android:name=”.MainApplication”
  android:label=”@string/app_name”
  android:icon=”@mipmap/ic_launcher”
  android:roundIcon=”@mipmap/ic_launcher_round”
  android:allowBackup=”true”
  android:theme=”@style/AppTheme”>

Testing backups on Android is a bit more complicated, but at least it works in the simulator as well!

First, you should make sure to enable backups in your simulator device!

Go to the settings in your simulator and search for “Backup”.
You should be able to find the option “Backup & reset”. In there you enable “Back up my data”. After that you are ready to go!

Now you can use the following adb commands to create a backup and restore a backup.

adb shell bmgr backupnow <PACKAGE>

adb shell bmgr restore <TOKEN> <PACKAGE>

Replace <PACKAGE> and <TOKEN> with your apps and backup data (the backup id will be 1 if you did it in the simulator).

After you created a backup you can also just uninstall and reinstall the app. It will work the same like bmgr restore . Just be aware, that Google doesn’t recommend using the bmgr restore command without a token, because this command works slightly different to the other restore commands.

To really verify that it works I recommend you doing some changes before you restore, because then you should see a rollback to the backup state. If you use the bmgr restore command, the app will close, wipe all the local data and restore it from the backup.

For more information on Google Drive backups I recommend checking out this page.

Alright, that’s it! Prepare your app release and ship it to your users.

If you liked this article, make subscribe to my newsletter where I share a lot more about programming and starting your own business!