Docs Menu

Docs HomeRealm

Debugging with Flipper - React Native SDK

On this page

  • Overview
  • Requirements
  • Setup
  • Install the Flipper Desktop App
  • Add Flipper to your React Native App
  • Launch the Flipper Desktop App
  • Add the Realm Flipper Plugin to the Flipper Desktop App
  • Install Realm Flipper Plugin Device with NPM
  • Import Realm Flipper Plugin in your Code

To debug Realm apps built with React Native, use the Flipper Debugger. Flipper provides a way to visualize, inspect, and control your apps from a simple desktop interface. In addition to Flipper's intuitive interface, the Realm Flipper Plugin provides additional ways to inspect your Realm Database through:

  • Live Objects: See objects in real-time.

  • Schema Dependency Graph: View schemas and their relationships.

  • Make changes: Create, modify and delete objects

  • Query: Query the database using RQL

1

Follow the Getting Started with Flipper guide to install Flipper for your operating system.

2

If you did not use react-native init to initialize your app, follow the manual setup guide(s) to add Flipper to your app:

If you did use react-native init to initialize your app and are on React Native version 0.62 or greater, Flipper integration is supported out of the box. Otherwise, if you are on an earlier version of React Native, follow the Automatic Setup guide.

3

Launch your React Native mobile app and open the Flipper Desktop application. Your React Native app should be available in Flipper's App Inspect tab.

Flipper Getting Started
4

Within the Flipper Desktop App, click the Plugin Manager tab on the left-hand side. When the Plugin Manager modal opens, select the Install Plugins option. Then search for the "realm-flipper-plugin" and install it.

Add Realm Flipper Plugin

Click the red alert to reload the Flipper Desktop app and apply changes.

Add Realm Flipper Plugin
5

Realm Flipper Plugin Device enables React Native applications to interact with Realm Flipper Plugin. Realm Flipper Plugin Device also requires the React Native Flipper plugin. To install both, run the following command:

npm install realm-flipper-plugin-device react-native-flipper

If you are developing on iOS, run the following command to auto-link the react-native-flipper module with CocoaPods:

cd ios
pod install
cd ..
6

Import the RealmPlugin component realm-flipper-plugin-device package in the file in which you open a realm.

import RealmPlugin from 'realm-flipper-plugin-device';

Within your component's return statement, render your RealmPlugin and pass it the opened realm as a parameter. You can pass in multiple opened realms.

return (
<View>
<RealmPlugin realms={[realm]} /> {/* pass in the Realm to the plugin*/}
// ...
</View>
);

Navigate back to the Realm Flipper Desktop app. Under the Enabled plugins, you should see the Realm plugin.

If you don't see the Realm plugin enabled, click the Disabled dropdown and enable the Realm Flipper Plugin by tapping the + Enable Plugin button.

Enable Realm Flipper Plugin

You should see the following enabled Realm Flipper Plugin.

View Enabled Realm Flipper Plugin

Using the Realm Flipper Plugin, you can now:

  • create, modify and delete your realm objects

  • query the database using RQL

  • view schemas and their relationships using the Schema Dependency Graph

←  Testing - React Native SDKRealm Integrations - React Native SDK →
Share Feedback
© 2023 MongoDB, Inc.

About

  • Careers
  • Investor Relations
  • Legal Notices
  • Privacy Notices
  • Security Information
  • Trust Center
© 2023 MongoDB, Inc.