react-native-flipper-databases
    TypeScript icon, indicating that this package has built-in type declarations

    2.4.0 • Public • Published

    react-native-flipper-databases

    Flipper Databases plugin for React Native

    license Build & Test Language grade: JavaScript Github Issues

    NPM version NPM downloads

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

    screenshot.jpeg

    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
    
    // ...

    PouchDB

    Setup

    Attach an open PouchDB database:

    // ...
    
    const db = new PouchDB('db', {
      adapter: 'react-native-sqlite',
    });
    
    /// ReactNativeFlipperDatabases - START
    
    if (__DEV__) {
      // Import connectDatabases function and required DBDrivers
      const {
        connectDatabases,
        PouchDB: PouchDBDriver,
      } = require('react-native-flipper-databases');
    
      connectDatabases([
        new PouchDBDriver([db]), // Pass in database definitions
      ]);
    }
    
    /// ReactNativeFlipperDatabases - END
    
    // ...

    Vasern

    Setup

    Attach an open Vasern database:

    // ...
    
    export const VasernDB = new Vasern({
      // Vasern config
    });
    
    /// ReactNativeFlipperDatabases - START
    
    if (__DEV__) {
      // Import connectDatabases function and required DBDrivers
      const {
        connectDatabases,
        VasernDB: VasernDBDriver,
      } = require('react-native-flipper-databases');
    
      connectDatabases([
        new VasernDBDriver(VasernDB), // Pass in database definitions
      ]);
    }
    
    /// ReactNativeFlipperDatabases - END
    
    // ...

    react-native-sqlite-storage

    Setup

    Attach an open SQLite database (with Promise support enabled)

    // ...
    
    SQLite.enablePromise(true);
    
    async function openDatabase() {
      const db = await SQLite.openDatabase({ name: 'data.db' });
    
      // Create tables
    
      /// ReactNativeFlipperDatabases - START
    
      if (__DEV__) {
        // Import connectDatabases function and required DBDrivers
        const { connectDatabases, SQLiteStorage } = require('react-native-flipper-databases');
        connectDatabases([
          // Pass in database definitions
          new SQLiteStorage([
            {
              name: 'data.db',
              database: db,
            },
          ]),
        ]);
      }
    
      /// ReactNativeFlipperDatabases - END
    
      return db;
    }
    
    // ...

    Examples

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

    To run the examples:

    • clone the repo
    git clone https://github.com/panz3r/react-native-flipper-databases.git
    • bootstrap the project
    yarn 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 & ❤️ by Mattia Panzeri and contributors

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

    buy me a coffee

    Install

    npm i react-native-flipper-databases

    DownloadsWeekly Downloads

    1,520

    Version

    2.4.0

    License

    MIT

    Unpacked Size

    251 kB

    Total Files

    69

    Last publish

    Collaborators

    • panz3r