Debugging with Flipper - React Native SDK

Install the Flipper Desktop App

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

Add Flipper to your React Native App

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

• Manual Android Setup

• Manual iOS Setup

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.

Launch the Flipper Desktop App

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.

Add the Realm Flipper Plugin to the Flipper Desktop App

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.

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

Install Realm Flipper Plugin Device with NPM

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 ..

Import Realm Flipper Plugin in your Code

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.

You should see the following 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