import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';

Currently, the <Link to={useBaseUrl("/docs/features/plugins/fresco")}>Image plugin</Link> only supports [Fresco](https://frescolib.org/) for Android as backend.

If you'd like to see support for other image loading libraries, please post your request in the [Flipper Support](https://fb.workplace.com/groups/flippersupport) Workplace group.

## Fresco and Android

The Fresco Images plugin is shipped as a separate Maven artifact:

```groovy
dependencies {
  debugImplementation 'com.facebook.flipper:flipper-fresco-plugin:0.30.1'
}
```

After including the plugin in your dependencies, you can add it to the client:

```java
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;

client.addPlugin(new FrescoFlipperPlugin());
```

The `FrescoFlipperPlugin` constructor offers a range of configuration options that can be useful if you have an advanced setup of Fresco in your application:

```java
FrescoFlipperPlugin(
      DebugImageTracker imageTracker,
      PlatformBitmapFactory bitmapFactory,
      @Nullable FlipperObjectHelper flipperObjectHelper,
      DebugMemoryManager memoryManager,
      FlipperPerfLogger perfLogger,
      @Nullable FrescoFlipperDebugPrefHelper debugPrefHelper,
      @Nullable CloseableReferenceLeakTracker closeableReferenceLeakTracker) { ... }
```

### Leak Tracking

The Flipper plugin can help you track down `CloseableReferences` that have not had `close()` called on them. However, this can have a negative impact on the performance of your application.

To enable this functionality, you need to create a `CloseableReferenceLeakTracker` and set it in both your `ImagePipelineConfig` for Fresco and the `FrescoPluginPlugin` on creation:

```java
import com.facebook.imagepipeline.debug.FlipperCloseableReferenceLeakTracker;

// ...

FlipperCloseableReferenceLeakTracker leakTracker = new FlipperCloseableReferenceLeakTracker();

new ImagePipelineConfig.Builder()
    // ...
    .setCloseableReferenceLeakTracker(leakTracker)
    .build();


client.addPlugin(new FrescoFlipperPlugin(
    new FlipperImageTracker(),
    Fresco.getImagePipelineFactory().getPlatformBitmapFactory(),
    null,
    new NoOpDebugMemoryManager(),
    new NoOpFlipperPerfLogger(),
    null,
    leakTracker));
```

### Attribution

In order to annotate images with the context they are used in, you have to set a caller context when loading the image. This can be any object; for the simplest case, a String will suffice, as shown below:

```java
String callerContext = "my_feature";

// For DraweeViews:
draweeView.setImageURI(uri, callerContext);

// For prefetching:
ImagePipeline imagePipeline = Fresco.getImagePipeline();
imagePipeline.prefetchToDiskCache(imageRequest, callerContext);

// For manually fetching an image:
DataSource<CloseableReference<CloseableImage>>
    dataSource = imagePipeline.fetchDecodedImage(imageRequest, callerContext);
```

If a caller context is supplied, the image will be properly attributed in the Flipper image plugin.
