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

Latest comments (0)

Read next

marcoscostadev profile image

MAUI - Por onde começar? Parte 1: Entendendo o MAUI

Marcos Costa -

sebastienlorber profile image

This Week In React #179: useActionState, Redwood, React-Navigation, RN-Screens, CodePush, VisionOS...

Sebastien Lorber -

mitchiemt11 profile image

React Navigation v7 sneak peek: Static API introduced

Mitchell Mutandah -

milic128 profile image

Expo APK build with Windows

Manojlo Ilic -