BlogAnnounced at MongoDB.local NYC 2024: A recap of all announcements and updatesLearn more >>
MongoDB Developer
JavaScript
plus
Sign in to follow topics
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Languageschevron-right
JavaScriptchevron-right

Technical Preview of a Realm Flipper Plugin

Kenneth Geisshirt3 min read • Published Oct 20, 2022 • Updated Apr 02, 2024
React NativeRealmJavaScript
Facebook Icontwitter iconlinkedin icon
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.

Facebook Icontwitter iconlinkedin icon
Rate this article
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Tutorial

How to Archive Data to Cloud Object Storage with MongoDB Online Archive


May 31, 2023 | 9 min read
Tutorial

Building an E-commerce Content Catalog with Atlas Search


Jun 27, 2022 | 10 min read
Tutorial

How to Write Unit Tests for MongoDB Atlas Functions


Sep 23, 2022 | 10 min read
Tutorial

Adding Authentication to Your FARM Stack App


Apr 02, 2024 | 7 min read
Table of Contents
  • Installation