CodeBlanks Logo Icon CodeBlanks
Login Register

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.

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

Starter code

App.js
// Write a network request; call a URL with fetch
// Catch the response with .then

Sample solution

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

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What is Flipper's main job?

App.js
npx flipper
  • Build an APK
  • Write a test
  • Pick a color palette
  • Open a mobile debug session Correct answer

Explanation: Flipper opens a mobile debugging session.

2 Start Flipper

Question 
// Start ____ for debugging
Answer 
// Start Flipper for debugging

Explanation: Starting Flipper opens a debugging session.

3 Match each feature to its role

Term Meaning
Network Lists fetch calls
Layout Shows component tree
Logs Shows console output
Databases Inspects database

All lessons in Intermediate

1 Hooks

  1. useEffect
  2. Dependency array
  3. Cleanup
  4. useRef
  5. useMemo
  6. Summary - Hooks

2 Custom hooks

  1. Custom hook
  2. useToggle
  3. useCounter
  4. usePrevious
  5. Hook composition
  6. Summary - Custom hooks

3 Context

  1. What is Context?
  2. createContext
  3. Provider
  4. useContext
  5. Context default
  6. Summary - Context

4 Project: Notes app

  1. Project design
  2. Note model
  3. Adding notes
  4. AsyncStorage
  5. Putting it together

5 useReducer

  1. useReducer
  2. Reducer function
  3. Action dispatch
  4. Initial state
  5. useReducer vs useState
  6. Summary - useReducer

6 Form handling

  1. Controlled form
  2. Form state
  3. Validation
  4. Submit
  5. Form libraries
  6. Summary - Form handling

7 API and fetch

  1. fetch
  2. GET request
  3. async/await
  4. JSON parse
  5. Error handling
  6. Summary - API and fetch

8 Project: Quiz app

  1. Quiz model
  2. Loading questions
  3. Running the quiz
  4. Score calculation
  5. Putting it together

9 Tab navigation

  1. Bottom Tabs
  2. createBottomTabNavigator
  3. Tab icons
  4. Material Top Tabs
  5. Tab badge
  6. Summary - Tab navigation

10 Drawer navigation

  1. Drawer navigator
  2. createDrawerNavigator
  3. Drawer items
  4. Drawer toggle
  5. Nested navigation
  6. Summary - Drawer navigation

11 Lifecycle

  1. Mount
  2. Update
  3. Unmount
  4. useEffect lifecycle
  5. Layout effect
  6. Summary - Lifecycle

12 Project: E-commerce

  1. Project design
  2. Product list
  3. Product detail
  4. Cart
  5. Putting it together

13 Animated

  1. Animated.Value
  2. Animated.View
  3. Animated.timing
  4. Animated.spring
  5. interpolate
  6. Summary - Animated

14 Gestures

  1. PanResponder
  2. onMoveShouldSetPanResponder
  3. onPanResponderMove
  4. onPanResponderRelease
  5. react-native-gesture-handler
  6. Summary - Gestures

15 Theme

  1. Light/dark theme
  2. Theme context
  3. Theme toggle
  4. useColorScheme
  5. Persistent theme
  6. Summary - Theme

16 Performance

  1. React.memo
  2. useCallback
  3. useMemo
  4. FlatList optimization
  5. InteractionManager
  6. Summary - Performance

17 Testing

  1. Jest
  2. React Native Testing Library
  3. render
  4. getByText
  5. fireEvent
  6. Summary - Testing

18 Dev tools

  1. Flipper
  2. React DevTools
  3. Console
  4. Remote debug
  5. Performance monitor
  6. Summary - Dev tools

19 Permissions

  1. What are permissions?
  2. expo-permissions
  3. Camera permission
  4. Location permission
  5. Notification permission
  6. Summary - Permissions

20 Intermediate final

  1. Project design
  2. Context and hooks
  3. API integration
  4. Navigation
  5. Putting it together