Profiling with Flipper in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable Flipper in a React Native app.

React Native

if (__DEV__) {
  require('react-native-flipper').[1]();
}

Drag options to blanks, or click blank then click option'

Aenable

Bstart

Cinitialize

Dconnect

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method that does not exist like start or enable.

The connect() function from react-native-flipper starts the connection to Flipper in development mode.

2fill in blank

medium

Complete the code to add Flipper plugin for React DevTools.

React Native

import ReactDevTools from 'react-devtools-core';

Flipper.addPlugin(new ReactDevTools.[1]());

Drag options to blanks, or click blank then click option'

AClient

BAgent

CPlugin

DConnector

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing Plugin or Agent as the class name.

The Client class from react-devtools-core is used to create a new React DevTools plugin instance for Flipper.

3fill in blank

hard

Fix the error in the Flipper setup to correctly enable network plugin.

React Native

import { NetworkPlugin } from 'react-native-flipper';

const network = new NetworkPlugin();

Flipper.[1](network);

Drag options to blanks, or click blank then click option'

AusePlugin

BaddPlugin

CregisterPlugin

DenablePlugin

Attempts:

3 left

💡 Hint

Common Mistakes

Using registerPlugin which is not a method on Flipper object.

The correct method to add a plugin instance to Flipper is addPlugin().

4fill in blank

hard

Fill both blanks to create a Flipper plugin that logs messages.

React Native

class LoggerPlugin extends Flipper.[1] {
  constructor() {
    super('[2]');
  }
}

Drag options to blanks, or click blank then click option'

APlugin

BClient

CLogger

DDebugger

Attempts:

3 left

💡 Hint

Common Mistakes

Using Client as base class or a wrong plugin name.

Flipper plugins extend the Plugin class. The plugin name can be any string, here 'Logger'.

5fill in blank

hard

Fill all three blanks to create a Flipper React Native plugin with lifecycle methods.

React Native

class MyPlugin extends Flipper.[1] {
  onConnect() {
    console.log('[2] connected');
  }
  onDisconnect() {
    console.log('[3] disconnected');
  }
}

Drag options to blanks, or click blank then click option'

APlugin

BLogger

CMyPlugin

DClient

Attempts:

3 left

💡 Hint

Common Mistakes

Using Logger or Client as base class or plugin name.

The plugin class extends Plugin. The plugin name used in logs is 'MyPlugin'.