Flipper

Learn the Flipper mobile debug tool.

What is Flipper?

Flipper is a desktop debugging tool for React Native. It shows network requests, layout, database and console output in one window. It streams live data while the app runs; this makes finding issues faster.

Once you set up Flipper, Android and iOS simulators connect automatically. The Network tab lists fetch calls; the Layout tab visualizes the component tree. It is extensible; you can write your own plugins. Since React Native 0.62 it ships by default; no extra install needed. It puts the whole debugging workflow in one place.

Setup

On React Native 0.62 and later Flipper ships by default. You do not need to change configuration files; when the app runs Flipper connects automatically. You only download and open the desktop app.

When you open Flipper it lists the connected device or simulator. Clicking it shows the tabs: Network, Layout, Logs, Databases. When the app makes a fetch call it appears instantly in the Network tab. On older React Native versions you install it manually with react-native flipper. New projects skip this step.

Exercise Write a fetch call

Write a fetch call that will show in Flipper's Network tab. URL is 'https://api.example.com/data'. Catch the response with .then.

Show example solution

fetch("https://api.example.com/data").then((res) => {
  return res.json();
});

Test yourself

What is Flipper's main job?
```
npx flipper
```
- Build an APK
- Write a test
- Pick a color palette
- Open a mobile debug session
Show answer

Open a mobile debug session — Flipper opens a mobile debugging session.

Start Flipper

// Start ____ for debugging

Show answer

// Start Flipper for debugging

Match each feature to its role

Network

Lists fetch calls
Layout

Shows component tree
Logs

Shows console output
Databases

Inspects database

Next lesson: React DevTools

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies