react-native-flipper-databases

Flipper Databases plugin for React Native

This React Native plugin allows browsing popular React Native databases using Flipper built-in Databases plugin.

Installation

1yarn add -D react-native-flipper react-native-flipper-databases

Setup

iOS

No particular setup is required on iOS.

Android

Since Android already provide a built-in Databases plugin (see official docs here for more details) in order to avoid conflicts with react-native-flipper-databases it must be disabled.

Edit ReactNativeFlipper.java file under android/app/src/debug/java/<your-app-package> like this

1...
2
3import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
4// import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; // <- Exclude to avoid plugin conflicts
5import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
6import com.facebook.flipper.plugins.inspector.DescriptorMapping;
7import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
8import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
9import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
10import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
11import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
12...
13
14  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
15    if (FlipperUtils.shouldEnableFlipper(context)) {
16      final FlipperClient client = AndroidFlipperClient.getInstance(context);
17
18      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
19      client.addPlugin(new ReactFlipperPlugin());
20      // client.addPlugin(new DatabasesFlipperPlugin(context)); // <- Exclude to avoid plugin conflicts
21      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
22      client.addPlugin(CrashReporterPlugin.getInstance());
23...

See facebook/flipper#1628 for more details.

Expo

When sticking to a managed Expo project, it's impossible to make the necessary modifications to the ReactNativeFlipper.java file.

@liamdawson wrote a basic plugin to automate those changes, which will ensure Expo prebuild and builds via EAS will disable the integrated Databases plugin on Android.

See @liamdawson/disable-react-native-flipper-databases-expo-plugin for more info.

Usage

WatermelonDB

Compatibility

WatermelonDB Version	Use Version
>=0.24.0	2.x
<0.24.0	1.x

Setup

Attach a WatermelonDB database:

1// ...
2
3/// ReactNativeFlipperDatabases - START
4
5if (__DEV__) {
6  // Import connectDatabases function and required DBDrivers
7  const { connectDatabases, WatermelonDB } = require('react-native-flipper-databases');
8
9  connectDatabases([
10    new WatermelonDB(database), // Pass in database definition
11  ]);
12}
13
14/// ReactNativeFlipperDatabases - END
15
16// ...

MongoDB Realm

Setup

Attach an open Realm:

1// ...
2
3const realm = await Realm.open(config);
4
5/// FlipperDatabasesPlugin - START
6
7if (__DEV__) {
8  // Import connectDatabases function and required DBDrivers
9  const { connectDatabases, RealmDB } = require('react-native-flipper-databases');
10
11  connectDatabases([
12    new RealmDB('Realm', realm), // Pass in a realm name and an open realm reference
13  ]);
14}
15
16/// FlipperDatabasesPlugin - END
17
18// ...

PouchDB

Setup

Attach an open PouchDB database:

1// ...
2
3const db = new PouchDB('db', {
4  adapter: 'react-native-sqlite',
5});
6
7/// ReactNativeFlipperDatabases - START
8
9if (__DEV__) {
10  // Import connectDatabases function and required DBDrivers
11  const {
12    connectDatabases,
13    PouchDB: PouchDBDriver,
14  } = require('react-native-flipper-databases');
15
16  connectDatabases([
17    new PouchDBDriver([db]), // Pass in database definitions
18  ]);
19}
20
21/// ReactNativeFlipperDatabases - END
22
23// ...

Vasern

Setup

Attach an open Vasern database:

1// ...
2
3export const VasernDB = new Vasern({
4  // Vasern config
5});
6
7/// ReactNativeFlipperDatabases - START
8
9if (__DEV__) {
10  // Import connectDatabases function and required DBDrivers
11  const {
12    connectDatabases,
13    VasernDB: VasernDBDriver,
14  } = require('react-native-flipper-databases');
15
16  connectDatabases([
17    new VasernDBDriver(VasernDB), // Pass in database definitions
18  ]);
19}
20
21/// ReactNativeFlipperDatabases - END
22
23// ...

react-native-sqlite-storage

Setup

Attach an open SQLite database (with Promise support enabled)

1// ...
2
3SQLite.enablePromise(true);
4
5async function openDatabase() {
6  const db = await SQLite.openDatabase({ name: 'data.db' });
7
8  // Create tables
9
10  /// ReactNativeFlipperDatabases - START
11
12  if (__DEV__) {
13    // Import connectDatabases function and required DBDrivers
14    const { connectDatabases, SQLiteStorage } = require('react-native-flipper-databases');
15    connectDatabases([
16      // Pass in database definitions
17      new SQLiteStorage([
18        {
19          name: 'data.db',
20          database: db,
21        },
22      ]),
23    ]);
24  }
25
26  /// ReactNativeFlipperDatabases - END
27
28  return db;
29}
30
31// ...

react-native-quick-sqlite

Setup

1import { openDatabase } from 'react-native-quick-sqlite'
2
3// ...
4
5/// ReactNativeFlipperDatabases - START
6
7if (__DEV__) {
8  // Import connectDatabases function and required DBDrivers
9  const {
10    connectDatabases,
11    QuickSQLiteStorage,
12  } = require('react-native-flipper-databases');
13
14  openDatabase(
15    { name: 'data.db' },
16    (db) => {
17      connectDatabases([
18        new QuickSQLiteStorage([
19          {
20            name: 'data.db',
21            database: db,
22          },
23        ]),
24      ])
25    },
26    () => {},
27  )
28}
29
30/// ReactNativeFlipperDatabases - END
31
32// ...

Examples

To see how to implement this plugin and test how it works some examples are provided.

To run the examples:

• clone the repo

1git clone https://codeberg.org/panz3r/react-native-flipper-databases.git

• bootstrap the project

1yarn bootstrap

• launch one of the following scripts from the root folder

  • example:watermelon to launch the WatermelonDB example app
  • example:realm to launch the MongoDB Realm example app
  • example:pouch to launch the PouchDB example app
  • example:vasern to launch the Vasern example app
  • example:sqlitestorage to launch the SQLite Storage example app

The plugin integrations are located inside the src/infrastructure/database folder of each example app.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with :sparkles: & :heart: by Mattia Panzeri and contributors