Flipper Databases plugin for React Native
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.
Usage
For WatermelonDB:
// ...
/// ReactNativeFlipperDatabases - START
if (__DEV__) {
// Import connectDatabases function
const connectDatabases = require('react-native-flipper-databases').default;
// Import required DBDrivers
const WatermelonDBDriver = require('react-native-flipper-databases/src/drivers/watermelondb').default;
connectDatabases([
new WatermelonDBDriver(database), // Pass in database definition
]);
}
/// ReactNativeFlipperDatabases - END
// ...