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

yarn 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

...

import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
// import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; // <- Exclude to avoid plugin conflicts
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
...

  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
    if (FlipperUtils.shouldEnableFlipper(context)) {
      final FlipperClient client = AndroidFlipperClient.getInstance(context);

      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
      client.addPlugin(new ReactFlipperPlugin());
      // client.addPlugin(new DatabasesFlipperPlugin(context)); // <- Exclude to avoid plugin conflicts
      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
      client.addPlugin(CrashReporterPlugin.getInstance());
...

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:

// ...

/// ReactNativeFlipperDatabases - START

if (__DEV__) {
  // Import connectDatabases function and required DBDrivers
  const {
    connectDatabases,
    WatermelonDB,
  } = require('react-native-flipper-databases');

  connectDatabases([
    new WatermelonDB(database), // Pass in database definition
  ]);
}

/// ReactNativeFlipperDatabases - END

// ...

MongoDB Realm

Setup

Attach an open Realm:

// ...

const realm = await Realm.open(config);

/// FlipperDatabasesPlugin - START

if (__DEV__) {
  // Import connectDatabases function and required DBDrivers
  const {
    connectDatabases,
    RealmDB,
  } = require('react-native-flipper-databases');

  connectDatabases([
    new RealmDB('Realm', realm), // Pass in a realm name and an open realm reference
  ]);
}

/// FlipperDatabasesPlugin - END

// ...

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

If you found this project to be helpful, please consider buying me a coffee.