MongoDB Developer
JavaScript
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Languageschevron-right
JavaScriptchevron-right

Technical Preview of a Realm Flipper Plugin

Kenneth GeisshirtPublished Oct 20, 2022 • Updated Oct 20, 2022
React NativeRealmJavaScript
Copy Link
facebook icontwitter iconlinkedin icon
random alt
Rate this article
star-empty
star-empty
star-empty
star-empty
star-empty
React Native is a framework built by many components, and often, there are multiple ways to do the same thing. Debugging is an example of that. React Native exposes the Chrome DevTools Protocol, and you are able to debug mobile apps using the Chrome browser. Moreover, if you are using MacOS, you can debug your app running on iOS using Safari.
Flipper is a new tool for mobile developers, and in particular, in the React Native community, it’s growing in popularity.
In the past, debugging a React Native app with Realm JavaScript has virtually been impossible. Switching to the new React Native architecture, it has been possible to switch from the Chrome debugger to Flipper by using the new JavaScript engine, Hermes.
Debugging is more than setting breakpoints and single stepping through code. Inspecting your database is just as important.
Flipper itself can be downloaded, or you can use Homebrew if you are a Mac user. The plugin is available for installation in the Flipper plugin manager and on npm for the mobile side. 
In the last two years, Realm has been investing in providing a better experience for React Native developers. Over the course of 10 weeks, a team of three interns investigated how Realm can increase developer productivity and enhance the developer experience by developing a Realm plugin for Flipper to inspect a Realm database.
The goal with the Realm Flipper Plugin is to offer a simple-to-use and powerful debugging tool for Realm databases. It enables you to explore and modify Realm directly from the user interface.

Installation

The Flipper support consists of two components. First, you need to install the flipper-realm-plugin in the Flipper desktop application. You can find it in Flipper’s plugin manager — simply search for it by name.
Second, you have to add Flipper support to your React Native app. Add realm-flipper-plugin-device to your app’s dependencies, and add the component <RealmPlugin realms=[realm] /> to your app’s source code (realms is an array of Realm instances).
Once you launch your app — on device or simulator — you can access your database from the Flipper desktop application.

Features

Live objects are a key concept of Realm. Query results and individual objects will automatically be updated when the underlying database is changed. The Realm Flipper plugin supports live objects. This means whenever objects in a Realm change, it’s reflected in the plugin. This makes it easy to see what is happening inside an application. Data can either be filtered using Realm Query Language or explored directly in the table. Additionally, the plugin enables you to traverse linked objects inside the table or in a JSON view.
The object type  "Delivery" displayed as a table, and its objects are represented by rows
The schema tab shows an overview of the currently selected schema and its properties.
The Realm schema can be visualized as directed graph. Relationships (links or list of links) are showed as oriented edges between the nodes
Schemas are not only presented in a table but also as a directed graph, which makes it even easier to see dependencies.

Looking ahead

Currently, our work on Hermes is only covered by pre-releases. In the near future, we will release version 11.0.0. The Realm Flipper plugin will hopefully prove to be a useful tool when you are debugging your React Native app once you switch to Hermes.
From the start, the plugin was split into two components. One component runs on the device, and the other runs on the desktop (inside the Flipper desktop application). This will make it possible to add a database inspector within an IDE such as VSCode.

Disclaimer

The Realm Flipper plugin is still in the early stage of development. We are putting it out to our community to get a better understanding of what their needs are.
The plugin is likely to change over time, and for now, we cannot commit to any promises regarding bug fixes or new features. As always, you are welcome to create pull requests and issues.
And don’t forget — if you have questions, comments, or feedback, we’d love to hear from you in the MongoDB Community Forums.

Copy Link
facebook icontwitter iconlinkedin icon
Rate this article
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Tutorial

Build a Modern Blog with Gatsby and MongoDB


Sep 23, 2022
Tutorial

Push Notifications Using Atlas App Services & iOS Realm SDK


Jul 19, 2022
Code Example

Connect to a MongoDB Database Using Node.js


Oct 21, 2022
Code Example

Trends analyser


Jul 07, 2022
Table of Contents
  • Installation