Technical Preview of a Realm Flipper Plugin
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.
Debugging is more than setting breakpoints and single stepping through code. Inspecting your database is just as important.
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-pluginin the Flipper desktop application. You can find it in Flipper’s plugin manager — simply search for it by name.
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 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.
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.