72a140bd96
Summary: == Highlights == - Database query favourites are now persisted across sessions (b0caaa7) - Allow disabling iOS development in Settings (aab004a) - Various improvements to the sidebar - FPS graph to visualize slow UIs for plugin developers (31df1db) - Window theme attributes when clicking on a window in the inspector (c430fc3) - Removed Stetho dependency (48d6ea4). Thanks, ZacSweers! - Install plugins directly from package files (b9e7f5d6d1) == Fixes == - Mac plugins not showing up (02e0233) - Doctor: log both shown and suppressed warnings (35d62e70cb). Thanks, mateosilguero! - Fix default SDK path on Windows (e178221) - Doctor complains Android SDK is not installed (b625efe) - Update welcome screen links (33ad41c) - Fix 'Timed out waiting for device' error (060e8c0) Reviewed By: priteshrnandgaonkar Differential Revision: D19813089 fbshipit-source-id: 8b1fc6fb140d02b7f78adcadd7c45a3ed1755f2f
128 lines
4.6 KiB
Markdown
128 lines
4.6 KiB
Markdown
---
|
|
id: layout-plugin
|
|
title: Layout Inspector Setup
|
|
sidebar_label: Layout Inspector
|
|
---
|
|
|
|
To use the layout inspector plugin, you need to add the plugin to your Flipper client instance.
|
|
|
|
## Android
|
|
|
|
### Standard Android View Only
|
|
|
|
```java
|
|
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:
|
|
|
|
```groovy
|
|
dependencies {
|
|
debugImplementation 'com.facebook.flipper:flipper-litho-plugin:0.31.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.
|
|
|
|
```java
|
|
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)
|
|
|
|
The issue is that if you have some view that occupies big part of the screen but draws nothing and its Z-position is higher than your main content, then selecting view/component through Layout Inspector doesn't work as you intended, as it will always hit that transparent view and you need to manually navigate to the view you need which 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 will still be shown in the layout hierarchy, but it will not be selected while using the view picker.
|
|
|
|
```java
|
|
view.setTag(R.id.flipper_skip_view_traversal, true);
|
|
```
|
|
|
|
|
|
## iOS
|
|
|
|
### Standard UIView Only
|
|
|
|
To debug layout using Flipper, add the following pod:
|
|
|
|
```ruby
|
|
pod 'FlipperKit/FlipperKitLayoutPlugin', '~>' + flipperkit_version
|
|
```
|
|
|
|
Once you have added the pod, initialise the plugin and add it to the `FlipperClient` as follows.
|
|
|
|
<!--DOCUSAURUS_CODE_TABS-->
|
|
<!--Objective-C-->
|
|
```objective-c
|
|
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
|
|
|
|
SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
|
|
[client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]];
|
|
```
|
|
<!--Swift-->
|
|
```swift
|
|
import FlipperKit
|
|
|
|
let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
|
|
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
|
|
```
|
|
<!--END_DOCUSAURUS_CODE_TABS-->
|
|
|
|
### With ComponentKit Support
|
|
|
|
If you want to enable [ComponentKit support](https://github.com/facebook/componentkit) in the layout inspector, you need to add `FlipperKit/FlipperKitLayoutComponentKitSupport` to your Podfile.
|
|
|
|
```ruby
|
|
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.
|
|
<!--DOCUSAURUS_CODE_TABS-->
|
|
<!--Objective-C-->
|
|
```objective-c
|
|
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
|
|
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>
|
|
|
|
SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
|
|
[FlipperKitLayoutComponentKitSupport setUpWithDescriptorMapper: layoutDescriptorMapper];
|
|
[client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application
|
|
withDescriptorMapper: layoutDescriptorMapper]];
|
|
```
|
|
<!--Swift-->
|
|
```swift
|
|
import FlipperKit
|
|
|
|
let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
|
|
FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
|
|
|
|
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
|
|
```
|
|
<!--END_DOCUSAURUS_CODE_TABS-->
|