Extending Layout Inspector
The Layout Inspector plugin can be extended to support new kinds of UI components. You can also extend it to customize the data made available in the sidebar. Depending on whether you want to expose new data on Android or iOS, there are different interfaces you can use.

Android
Node Descriptor
To expose an object to the Layout Inspector in Flipper you have to implement a NodeDescriptor
which describes your object. For example the ViewDescriptor
describes View
objects and the FragmentDescriptor
describe Fragment
instances. These descriptors have a set of callbacks used to expose children and data associated with the object they describe. See NodeDescriptor
for the full API.
NodeDescriptor
implementations should not subclass other NodeDescriptor
implementations. Instead to re-use existing behavior from a more generic descriptor, you should prefer to use delegate.
Don't
Do
Register a Descriptor
Register your descriptor in the DescriptorMapping
used to instantiate the InspectorFlipperPlugin
.
Extending an existing Descriptor
You may not need to create a whole new descriptor but instead you may just want to change extend an existing one to expose some new piece of data. In that case just locate the correct descriptor and edit its getData
, getAttributes
and perhaps setData
methods.
iOS
SKNodeDescriptor
To expose an object to the layout inspector in Sonar you have to implement a SKNodeDescriptor
which describes the object. For example SKViewDescriptor
describes UIView
objects, and the SKComponentDescriptor
describes CKComponent
objects. These descriptors have necessary callbacks which is used to expose its children and data associated with the object they describe. See SKNodeDescriptor for the full available API.
SKNodeDescriptor
implementations should never be subclass other SKNodeDescriptor
implementations. Instead re-use existing behaviour by explicitly using other descriptors and delegate behaviour.
Don't
Do
Register a Descriptor
In order to register your descriptor for an object, you use SKDescriptorMapper
. After registering all descriptors you pass on the descriptor-mapper object to the plugin during initialisation.
There's already a set of descriptors registered by default in
SKDescriptorMapper
, and if you want to add a descriptor to the default set
you can do it in SKDescriptorMapper
.
Extending an existing Descriptor
Sometimes all you need is to extend the functionality of an existing descriptor. In that case you just need to locate the correct descriptor and edit the methods dataForNode
, attributesForNode
, and possibly dataMutationsForNode
.
Subdescriptors
If you want to extend the SKComponentKitLayoutDescriptor
and add an additional section based on the nodes of the SKComponentLayoutDescriptor
, you can use SKSubDescriptor
.
Swift support is not yet available because you must access SKComponentLayoutWrapper
to implement a subdescriptor.