Technical Preview of a Realm Flipper Plugin
Kenneth Geisshirt3 min read • Published Oct 20, 2022 • Updated Apr 02, 2024
Rate this article
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.
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.
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 schema tab shows an overview of the currently selected schema and its properties.
Schemas are not only presented in a table but also as a directed graph, which makes it even easier to see dependencies.
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.
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.
Rate this article