DEV Community

Cover image for Google Drive auto-backup for React Native on Android
Davyd NRB
Davyd NRB

Posted on

Google Drive auto-backup for React Native on Android

#reactnative #android #backup

What if async storage values were to persist when a user changed devices or installed an app again?

You won't believe it, but it works with Android right out of the box!

First we need to enable a backup option in the android/app/src/main/AndroidManifest.xml file:

    <application
      android:allowBackup="true"
      android:dataExtractionRules="@xml/backup_rules"
Enter fullscreen mode Exit fullscreen mode

docs: android:allowBackup=["true" | "false"]

Then create android/app/src/main/res/xml/backup_rules.xml file with the list of files that should be added to backup:

<?xml version="1.0" encoding="utf-8"?>
<data-extraction-rules>
  <cloud-backup>
    <!-- your rules -->
  </cloud-backup>
  <device-transfer>
    <!-- your rules -->
  </device-transfer>
</data-extraction-rules>
Enter fullscreen mode Exit fullscreen mode

docs: Backup and restore

Testing

More rules are listed below, but first, let's look at how to test them.

  1. You can use Simulator or Real device
  2. Need to enable Backups: Setting => System => Backup
  3. Then using adb you can create/restore backup: 
# Replace `com.mycompany.myapp` with your app package!!!

adb shell bmgr backupnow com.mycompany.myapp # Create backup

adb shell bmgr restore 1 com.mycompany.myapp
                    # ^^^ use a fake id `1` to show list of available sets
# No matching restore set token.  Available sets:
#  3a945fc11efadf47 : Google Pixel 7 Pro
# done

adb shell bmgr restore 3a945fc11efadf47 com.mycompany.myapp # Now use a real id, to restore backup
Enter fullscreen mode Exit fullscreen mode

Rules

I've compiled a list of guidelines for the most popular React Native packages for your convenience.

@react-native-async-storage/async-storage

<include domain="database" path="RKStorage"/>
<include domain="database" path="RKStorage-journal"/>
Enter fullscreen mode Exit fullscreen mode

react-native-shared-preferences

SharedPreferences.setName("my_name"); // js part
Enter fullscreen mode Exit fullscreen mode 
<include domain="sharedpref" path="my_name.xml" /> // android part
Enter fullscreen mode Exit fullscreen mode

react-native-mmkv

<include domain="file" path="./mmkv" />
Enter fullscreen mode Exit fullscreen mode

react-native-webview cookies

<include domain="root" path="./app_webview"/>
Enter fullscreen mode Exit fullscreen mode

realm-js

<include domain="file" path="./default.realm" />
<include domain="file" path="./default.realm.lock" />
<include domain="file" path="./default.realm.management" />
<include domain="file" path="./default.realm.note" />
Enter fullscreen mode Exit fullscreen mode

@nozbe/watermelondb

<include domain="root" path="./watermelon.db"/>
<include domain="root" path="./watermelon.db-wal"/>
<include domain="root" path="./watermelon.db-shm"/>
Enter fullscreen mode Exit fullscreen mode

How create own rule 

adb shell

run-as com.mycompany.myapp # Replace `com.mycompany.myapp` with your app package!!!

find . -type f # will print all files

# 1) For files in directory `./files/*`
#     <include domain="file" path="./mmkv" />
#                                  ^^^^^^ ./files/mmkv

# 2) For `./shared_prefs/*.xml`
#    <include domain="sharedpref" path="my_name.xml" />
#                                       ^^^^^^^^^ ./shared_prefs/my_name.xml

# ...
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

elozino profile image

Getting started with splash screen in Jetpack Compose

Elozino Ovedhe -

msaadullah profile image

Building Offline-First Apps using React Native, React Query, and AsyncStorage

M. Saad Ullah -

thechaudhrysab profile image

React-Native and Three.js

Chaudhry Talha 🇵🇸 -

cdsap profile image

Telltale: Automating Experimentation in Gradle Builds

Iñaki Villar -