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

theplebdev profile image

Quick and easy custom Jetpack compose checkbox

Tristan Elliott -

rubanraghavendar profile image

Flutter - Responsive Spacing

Ruban Raghavendar K -

amr-saafan profile image

Scaling React Apps with Reusable List Components

Amr Saafan -

robruf profile image

Does Flutter/React Native/Kotlin/Swift just handle the front-end side of an app?

Roberto Rufino -