react-native-flipper

What is react-native-flipper?

react-native-flipper is a plugin for integrating the Flipper debugging tool with React Native applications. It allows developers to inspect, debug, and analyze their React Native apps using the Flipper desktop application.

What are react-native-flipper's main functionalities?

Network Inspection

This feature allows developers to inspect network requests made by the React Native app. The code sample demonstrates how to add the NetworkPlugin to Flipper.

import { addPlugin } from 'react-native-flipper';
import { NetworkPlugin } from 'flipper-plugin-network';

addPlugin(NetworkPlugin);

Crash Reporting

This feature enables crash reporting for the React Native app. The code sample shows how to integrate the CrashReporterPlugin with Flipper.

import { addPlugin } from 'react-native-flipper';
import { CrashReporterPlugin } from 'flipper-plugin-crash-reporter';

addPlugin(CrashReporterPlugin);

Layout Inspection

This feature allows developers to inspect the layout of their React Native app. The code sample demonstrates how to add the LayoutInspectorPlugin to Flipper.

import { addPlugin } from 'react-native-flipper';
import { LayoutInspectorPlugin } from 'flipper-plugin-layout-inspector';

addPlugin(LayoutInspectorPlugin);

Async Storage Inspection

This feature enables inspection of Async Storage data in the React Native app. The code sample shows how to integrate the AsyncStoragePlugin with Flipper.

import { addPlugin } from 'react-native-flipper';
import { AsyncStoragePlugin } from 'flipper-plugin-async-storage';

addPlugin(AsyncStoragePlugin);

Other packages similar to react-native-flipper

react-native-debugger

react-native-debugger is a standalone app for debugging React Native apps. It includes React DevTools, Redux DevTools, and a network inspector. Compared to react-native-flipper, it provides a more integrated experience for Redux and React state management but lacks some of the additional plugins available in Flipper.

redux-devtools-extension

redux-devtools-extension is a package that integrates Redux DevTools with React Native apps. It focuses specifically on Redux state management and provides powerful tools for inspecting and debugging Redux state. Unlike react-native-flipper, it does not offer network inspection or crash reporting features.

reactotron

reactotron is a desktop app for inspecting React and React Native apps. It offers features like state inspection, action dispatching, and network request monitoring. While it provides similar functionalities to react-native-flipper, it is more focused on providing a comprehensive set of tools for both React and React Native development.

README

react-native-flipper

This package exposes JavaScript bindings to talk from React Native JavaScript directly to flipper.

This package might also be required by other Flipper plugins for React Native.

Installation

Run the following command in the root of your React Native project

yarn add react-native-flipper

Note that this package requires React Native 0.62 or higher.

Usage

How to build Flipper plugins is explained in the flipper documentation: Creating a Flipper plugin. Building a Flipper plugin involves building a plugin for the Desktop app, and a plugin that runs on a Device (Native Android, Native IOS or React Native). This package is only needed for the plugin that runs on the mobile device, in React Native, and wants to use the JavaScript bridge.

This package exposes one method: addPlugin. The addPlugin accepts a plugin parameter, that registers a client plugin and will fire the relevant callbacks if the corresponding desktop plugin is selected in the Flipper Desktop. The full plugin API is documented here.

Example

An example plugin can be found in examples/FlipperTicTacToe.js.

The corresponding Desktop plugin ships by default in Flipper, so importing the above file and dropping the <FlipperTicTacToe /> component somewhere in your application should work out of the box.

The sources of the corresponding Desktop plugin can be found here.