Skip to main content

Layout Plugin Setup

To use the Layout Inspector plugin, you need to add the plugin to your Flipper client instance.

Android​

Standard Android view only​

import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;

final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults();

client.addPlugin(new InspectorFlipperPlugin(mApplicationContext, descriptorMapping));

With Litho Support​

Litho support is provided via an optional plugin.

You also need to compile in the litho-annotations package, as Flipper reflects on them at runtime. So ensure to not just include them as compileOnly in your gradle configuration:

dependencies {
  debugImplementation 'com.facebook.flipper:flipper-litho-plugin:0.273.0'
  debugImplementation 'com.facebook.litho:litho-annotations:0.19.0'
  // ...
}

If you want to enable Litho support in the layout inspector, you need to augment the descriptor with Litho-specific settings and add some addition dependencies.

import com.facebook.litho.config.ComponentsConfiguration;
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.flipper.plugins.litho.LithoFlipperDescriptors;

// Instead of hard-coding this setting, it's a good practice to tie
// this to a BuildConfig flag, that you only enable for debug builds
// of your application.
ComponentsConfiguration.isDebugModeEnabled = true;

final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults();
// This adds Litho capabilities to the layout inspector.
LithoFlipperDescriptors.add(descriptorMapping);

client.addPlugin(new InspectorFlipperPlugin(mApplicationContext, descriptorMapping));

Blocking fullscreen views (Android only)​

There is an issue that if you have a view that occupies a big part of the screen but draws nothing, and its Z-position is higher than your main content, then selecting view/component through the Layout Inspector doesn't function as you intended. This is because it always hits that transparent view, therefore, you need to manually navigate to the view you need: this is time-consuming and should not be necessary.

Add the following tag to your view to skip it from Flipper's view picker. The view is still shown in the layout hierarchy but is selected while using the view picker:

view.setTag(R.id.flipper_skip_view_traversal, true);

Blocking empty view groups (Android only)​

If you have a ViewGroup that only occasionally has visible children, you may find it helpful to block its traversal when it's empty or has no visible children. For example, you might have a FragmentContainerView that currently has no visible fragment.

Add the following tag to your view group to skip it from Flipper's view picker only when it has zero children, or none of its children are currently visible. The views will still be shown in the layout hierarchy, but they will not be selected while using the view picker.

viewGroup.setTag(R.id.flipper_skip_empty_view_group_traversal, true);

iOS​

Standard UIView Only​

To debug layout using Flipper, add the following pod:

pod 'FlipperKit/FlipperKitLayoutPlugin', '~>' + flipperkit_version

Once you have added the pod, initialise the plugin and add it to the FlipperClient as follows.

#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>

SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
[client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]];

With ComponentKit Support​

If you want to enable ComponentKit support in the Layout Inspector, you need to add FlipperKit/FlipperKitLayoutComponentKitSupport to your Podfile:

pod 'FlipperKit/FlipperKitLayoutComponentKitSupport', '~>' + flipperkit_version

Once you have added the pod you will then need to augment the descriptor with Componentkit-specific settings as shown below.

#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>

SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
[FlipperKitLayoutComponentKitSupport setUpWithDescriptorMapper: layoutDescriptorMapper];
[client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application
                                           withDescriptorMapper: layoutDescriptorMapper]];